web-dev-qa-db-ja.com

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

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>

このコードに基づいて、この画像のようなドロップダウンが生成されます。

enter image description here

問題は、「Mr」または「Mrs」のいずれかの文字列であるpassenger.Titleに基づいて、アクティブなものとして「MrまたはMrs」のいずれかを設定することです。

ここで私が間違っていることを見るのに役立ちますか？

angulartypescriptselectngfor
31
Mikkel

これは動作するはずです

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

attr.の部分が必要かどうかわかりません。

65
Günter Zöchbauer

このデモfiddle で確認し、コードのドロップダウンまたはデフォルト値を変更してください。

passenger.Titleに等しい値を使用してtitle.Valueを設定する必要があります。

見る：

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

使用されるTypeScript：

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

}
11
acdcjunior