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将其中一个“先生或夫人”设置为活动的，这是一个字符串“Mr”或“Mrs”。

任何人都可以帮忙看看我在这里做错了什么？

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>

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

}