Angular2 * ngFor in der Auswahlliste, aktiv basierend auf String aus Objekt

Question

Ich versuche mit der ngFor auf meine DropDownList auswählen. Habe die Optionen geladen, die im Dropdown-Menü sein sollten.

Der Code sehen Sie hier:

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

auf dieser Code-Basis, erzeugt es ein Drop-Down, die wie dieses Bild aussehen.

Das Problem ist, dass ich einer von ihnen „Herr oder Frau“ setzen wollen als aktive man auf der passenger.Title basiert, die eine Zeichenfolge ist entweder „Herr“ oder „Frau“.

Jeder kann helfen zu sehen, was ich hier falsch mache?

Answer 1

Dies sollte

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

ich nicht sicher arbeiten bin der attr. Teil notwendig ist.

Answer 2

Überprüfen Sie es in this demo fiddle, gehen Sie voran und ändern Sie die Dropdown-oder Standardwerte im Code.

Die Einstellung passenger.Title mit einem Wert, der einem title.Value entspricht, sollte funktionieren.

Ausblick:

<select [(ngModel)]="passenger.Title"> 
    <option *ngFor="let title of titleArray" [value]="title.Value"> 
     {{title.Text}} 
    </option> 
</select> 

Typoskript verwendet:

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

}