angular - Angular2 *ngFor in select list, set active based on string from object

Question

I'm trying using the ngFor on my select DropDownList. Have loaded in the options which should be in the dropdown.

The code you see here:

<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>

Based on this code, it produces a dropdown which look like this image.

The problem is that I want to set one of them "Mr or Mrs" as the active one based on the passenger.Title which is a string either "Mr" or "Mrs".

Any can help see what I'm doing wrong here?

question from:https://stackoverflow.com/questions/35513049/angular2-ngfor-in-select-list-set-active-based-on-string-from-object

Answer 1

This should work

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

I'm not sure the attr. part is necessary.