Angular 2 Forms : lier une sélection html à une collection d'objets

Question

Je voudrais afficher une collection d'objets sélectionnables dans une application angular 2 (RC 5, forms 0.3.0)

<select [(ngModel)]="selectedItem">       
  <option *ngFor="let item of selectableItems"
          [value]="item">
    {{ item }}
  </option>
</select>

<div> {{ selectedItem }} </div>

La liste elle-même s'affiche correctement.

Mais tout ce qui est affiché pour 'selectedItem' est [object Object]. Lorsque j'accède à l'élément dans le code, j'obtiens la chaîne correspondante "[object Object]". J'ai essayé de passer à ngValue mais cela produit les mêmes résultats.

Tout fonctionne lorsque j'utilise des valeurs primitives au lieu d'objets. Mais je soupçonne qu'il me manque un point crucial ici.

Merci pour votre aide. J'ai perdu plusieurs heures en recherches sur Internet et en essais et erreurs. Peut-être que quelqu'un a rencontré le même problème.

Modifier (24-08-16) : Je suis tombé sur ce tutoriel qui explique comment créer des widgets de formulaires courants aujourd'hui. Peut-être qu'il sera utile à quelqu'un qui tombe sur cette page : https://scotch.io/tutorials/how-to-deal-with-different-form-controls-in-angular-2

Answer 1

D'après votre code et votre explication, je suppose que "item" est un objet complexe, et non un objet simple. Donc pour l'afficher en HTML, vous utiliseriez :

<div> {{ selectedItem | json }} </div>

Dans le code, vous devez accéder aux propriétés de l'élément (comme dans item.value ou toute autre propriété de l'élément). Si vous voulez travailler avec des valeurs simples, vous pouvez faire quelque chose comme ceci :

<select [(ngModel)]="selectedItem">       
  <option *ngFor="let item of selectableItems"
          [value]="item.id">
    {{ item }}
  </option>
</select>

Cela suppose bien sûr que l'article est un type complexe.

Modifier

Après quelques recherches (parce que ce problème m'a aussi tourmenté), j'ai trouvé la solution que je voulais vraiment ! Pour utiliser un objet complexe, il suffit d'utiliser [ngValue] pour lier la valeur ! La solution est décrite à https://github.com/angular/angular/issues/4843 . Ainsi, ce qui précède ressemblera à ceci :

<select [(ngModel)]="selectedItem">       
     <option *ngFor="let item of selectableItems"
             [ngValue]="item">
             {{item}}
     </option>
</select>

L'élément sélectionné sera alors l'élément correct de la liste, avec toutes ses propriétés.