web-dev-qa-db-fra.com

Angular2 * ngFor dans la liste de sélection, définit actif en fonction de la chaîne de l'objet

J'essaie d'utiliser le ngFor sur ma liste déroulante sélectionnée. Ont 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>

Basé sur ce code, il produit une liste déroulante qui ressemble à cette image.

enter image description here

Le problème est que je veux que l'un d'eux, "M. ou Mme", soit actif en fonction de la passenger.Title qui est une chaîne "Mr" ou "Mrs".

Tout peut aider à voir ce que je fais mal ici?

angulartypescriptselectngfor
31
Mikkel

Cela devrait marcher

<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 le attr. une partie est nécessaire.

65
Günter Zöchbauer

Vérifiez-le dans cette démonstration de violon , continuez et modifiez les valeurs par défaut ou dans le code déroulant.

Réglage du passenger.Title avec une valeur égale à un title.Value devrait marcher.

Vue:

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

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

}
11
acdcjunior