Angular2 * ngFor dans la liste de sélection, activé par chaîne à partir de l'objet

Question

J'essaie d'utiliser le ngFor sur mon DropDownList sélectionné. Avoir chargé dans les options qui devraient être dans la liste déroulante.

Le code que vous voyez ici:

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

Sur la base de ce code, il produit un menu déroulant qui ressemble à cette image.

Le problème est que je veux mettre un d'eux « M. ou Mme » comme celle qui est active sur la base passenger.Title qui est une chaîne soit « M. » ou « Madame ». Est-ce que tout peut aider à voir ce que je fais mal ici?

Answer 1

Cela devrait fonctionner

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

Je ne suis pas sûr que la partie attr. est nécessaire.

Answer 2

Vérifiez dans this demo fiddle, allez-y et modifier les valeurs déroulantes ou par défaut dans le code.

La définition de passenger.Title avec une valeur égale à title.Value devrait fonctionner.

Vue:

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

tapuscrit utilisé:

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

}