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

Question

我正在尝试ngFor在我的选择 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>

使用的打字稿：

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

}