Angular2 * ngPer l'elenco di selezione, impostare attivo in base alla stringa dall'oggetto

Question

Sto provando a utilizzare lo ngFor sulla mia selezione DropDownList. Sono caricati nelle opzioni che dovrebbero essere nel menu a discesa.

il codice che vedi qui:

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

Sulla base di questo codice, produce un menu a discesa che simile a questa immagine.

Il problema è che io voglio impostare uno di loro "signor o la signora", come quello attivo in base alla passenger.Title che è una stringa o "Mr" o "la signora".

Qualcuno può aiutare a vedere cosa sto facendo male qui?

Answer 1

Questo dovrebbe funzionare

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

Non sono sicuro che la parte attr. è necessario.

Answer 2

Verificare in this demo fiddle, andare avanti e modificare il menu a discesa o i valori predefiniti nel codice.

L'impostazione di passenger.Title con un valore uguale a title.Value dovrebbe funzionare.

Vista:

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

tipografico utilizzato:

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

}