Angular2 * ngFor в списке выбора, установите активный на основе строки из объекта

Я пытаюсь использовать 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>

На основе этого кода он выдает раскрывающееся меню, которое выглядит как это изображение.

Проблема в том, что я хочу установить один из них "Mr или Mrs" как активный, основанный на passenger.Title, который является строкой либо "Mr", либо "Mrs".

Любой может помочь увидеть, что я здесь делаю неправильно?

Ответ 1

Это должно работать

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

Я не уверен, что часть attr. необходима.

Ответ 2

Проверьте этот демонстрационный скрипт, измените выпадающие или значения по умолчанию в коде.

Настройка 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")];

}