Angular2*ngFor在选择列表中,根据来自对象的字符串设置活动

Question

我正在尝试使用ngFor我的select DropDownList.已加载应该在下拉列表中的选项.

你在这里看到的代码:

<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

在这个演示小提琴中查看它,继续并更改代码中的下拉列表或默认值.

passenger.Title使用等于a的值设置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")];

}