web-dev-qa-db-fra.com

Obtenir les propriétés d’un objet via la liste de sélection ngModel dans Angular 2?

J'ai un problème pour extraire les propriétés d'un objet sélectionné dans une liste de sélection dans Angular 2 (RC1). Prenez la syntaxe suivante:

<select required [(ngModel)]="model.plan">
  <option selected="selected" disabled>Plan...</option>
  <option *ngFor="#plan of plans" [value]="plan">{{ plan.name }}</option>
</select>

Où plans est défini comme un tableau d'objets:

[{ name: 'Plan 1' }, { name: 'Plan 2' }]

Si vous essayez d’afficher la valeur d’une des clés de l’objet sélectionné, rien ne s’affiche:

<p>{{ model.plan?.name }}</p> // Shows nothing if a plan is selected

Voici un fork de la démo live de Angular2 , montrant ce problème. Sélectionnez "Plan 2" dans la liste de sélection et vérifiez que rien ne s'affiche.

Que se passe t-il ici?

angularangular2-forms
14
ReactingToAngularVues

Pour utiliser des objets comme valeur, utilisez [ngValue] au lieu de [value]. [value] ne prend en charge que les identifiants de chaîne.

<select required [(ngModel)]="model"> <!-- <== changed -->
  <option selected="selected" disabled>Plan...</option>
  <option *ngFor="#plan of plans" [ngValue]="plan">{{ plan.name }}</option>
</select>

exemple Plunker

model doit pointer sur l'un des éléments de plans pour fonctionner comme valeur par défaut (il doit s'agir de la même instance et non d'une autre instance contenant les mêmes valeurs).

20
Günter Zöchbauer

Autant que je sache, il existe toujours un problème de liaison bidirectionnelle à select. Alors essayez ceci:

Modèle 

<select required [(ngModel)]="model.plan" (change)="setPlan($event.target.value)">
    <option selected="selected" disabled>Plan...</option>
    <option *ngFor="#plan of plans" [value]="plan.name">{{ plan.name }}</option>
</select>

Classe de composant 

setPlan(value) {
    //if you're on older versions of ES, use for-in instead
    var plan = this.plans.find(p => p.name = value);

    if(plan) { this.model.plan = plan; }
}

Impossible de l'essayer, pour une raison quelconque, plunkr n'a jamais fonctionné pour moi.

0
RoninCoder