Angular2 * ngFor選択リストでは、オブジェクトからの文字列に基づいてアクティブに設定します

Question

私は選択した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

これは私がattr.部分が必要であるかわからない

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

動作するはずです。

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")]; 

}