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

Mikkel picture Mikkel · Feb 19, 2016 · Viewed 115.9k times · Source

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.

enter image description here

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?

Answer

G&#252;nter Z&#246;chbauer picture Günter Zöchbauer · Feb 19, 2016

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.