Angular2 * ngFor在選擇列表中，根據來自對象的字符串設置活動

Question

我正在嘗試在我的Select DropDownList上使用ngFor。已加載應該在下拉列表中的選項。

的代碼，你在這裏看到：

<div class="column small-12 large-2"> 
    <label class="sbw_light">Title:</label><br /> 
    <select [(ngModel)]="passenger.Title"> 
     <option *ngFor="#title of titleArray" [value]="title.Value">{{title.Text}}</option> 
    </select> 
</div> 

在此基礎上的代碼，它會產生一個下拉，看起來這樣的形象。

的問題是，我想設置其中的一個「先生或太太」作爲基於passenger.Title活動其中之一是字符串，要麼是「先生」或「女士」。

任何可以幫助看到我在這裏做錯了嗎？

Answer 1

這應該工作

<option *ngFor="let title of titleArray" 
    [value]="title.Value" 
    [attr.selected]="passenger.Title==title.Text ? true : null"> 
    {{title.Text}} 
</option> 

我不知道該attr.部分是必要的。

Answer 2

在this demo fiddle中檢查出來，繼續並更改代碼中的下拉或默認值。

設置passenger.Title的值等於title.Value應該可以工作。

查看：

<select [(ngModel)]="passenger.Title"> 
    <option *ngFor="let title of titleArray" [value]="title.Value"> 
     {{title.Text}} 
    </option> 
</select> 

打字稿使用：

class Passenger { 
    constructor(public Title: string) { }; 
} 
class ValueAndText { 
    constructor(public Value: string, public Text: string) { } 
} 

... 
export class AppComponent { 
    passenger: Passenger = new Passenger("Lord"); 

    titleArray: ValueAndText[] = [new ValueAndText("Mister", "Mister-Text"), 
            new ValueAndText("Lord", "Lord-Text")]; 

}