Comment utiliser select / option / NgFor sur un tableau d’objects dans Angular2

J’ai du mal à créer une sélection dans Angular2 qui est soutenue par un tableau d’objects au lieu de chaînes. Je savais comment le faire dans AngularJS en utilisant ngOptions , mais cela ne semble pas fonctionner dans Angular2 (j’utilise l’alpha 42).

Dans l’exemple ci-dessous, j’ai quatre sélections, mais deux seulement fonctionnent.

  1. ‘Select Ssortingng’ est une sélection simple basée sur des chaînes, et cela fonctionne très bien.
  2. “Sélectionner un object via une liaison bidirectionnelle” était ma tentative d’utiliser une liaison bidirectionnelle. Malheureusement, il échoue de deux manières: lorsque la page se charge, la sélection affiche la mauvaise valeur (foo au lieu de la barre) et lorsque je sélectionne une option dans la liste, la valeur ‘[Object Object]’ est envoyée au magasin de sauvegarde. au lieu de la valeur correcte.
  3. “Select Object via event” était ma tentative pour obtenir la valeur sélectionnée de $ event. Il échoue également de deux manières: le chargement initial est incorrect de la même manière que # 2 et lorsque je sélectionne une option dans la liste, la valeur ‘[Object Object]’ est extraite de l’événement, donc je ne peux pas obtenir la bonne valeur. La sélection est effacée.
  4. “Sélectionner un object via une chaîne” est la seule approche qui utilise un object qui fonctionne. Malheureusement, cela fonctionne vraiment en utilisant le tableau de chaînes de # 1 et en convertissant la valeur de chaîne en object et retour.

Je peux faire # 4 si c’est la voie à suivre, mais ça semble plutôt maladroit. Y a-t-il une autre approche? Est-ce que je suis trop tôt dans l’alpha? Est-ce que j’ai fait quelque chose d’idiot?

import {Component, FORM_DIRECTIVES, NgFor} from 'angular2/angular2'; interface TestObject { name:ssortingng; value:number; } @Component({ selector: 'app', template: ` 

Select Ssortingng

{{o}}

Select Object via 2-way binding

{{o.name}}

Select Object via event

{{o.name}}

Select Object via ssortingng

{{o}}
`, directives: [FORM_DIRECTIVES, NgFor] }) export class AppComponent { objArray:TestObject[] = [{name: 'foo', value: 1}, {name: 'bar', value: 1}]; objValue1:TestObject = this.objArray[1]; objValue2:TestObject = this.objArray[1]; objValue3:TestObject = this.objArray[1]; strArray:ssortingng[] = this.objArray.map((obj:TestObject) => obj.name); strValue:ssortingng = this.strArray[1]; updateObjValue2(event:Event):void { const value:ssortingng = (event.srcElement).value; this.objValue2 = this.objArray.find((obj:TestObject) => obj.name === value); } updateObjValue3(event:Event):void { const value:ssortingng = (event.srcElement).value; this.objValue3 = this.objArray.find((obj:TestObject) => obj.name === value); } printValues():void { console.log('strValue', this.strValue); console.log('objValue1', this.objValue1); console.log('objValue2', this.objValue2); console.log('objValue3', this.objValue3); } }

Je ne sais pas ce que les choses étaient dans l’alpha, mais j’utilise bêta 12 maintenant et cela fonctionne bien. Si vous avez un tableau d’objects, créez une sélection comme ceci:

  

Si vous voulez faire correspondre l’object réel, je le ferais comme ceci:

  

Je ne suis pas un expert avec DOM ou Javascript / Typescript, mais je pense que les balises DOM ne peuvent pas gérer les objects javascript. Mais placer l’object entier sous forme de chaîne et l’parsingr sur un object / JSON a fonctionné pour moi:

 interface TestObject { name:ssortingng; value:number; } @Component({ selector: 'app', template: ` 

Select Object via 2-way binding

You selected:

{{selectedObject }} `, directives: [FORM_DIRECTIVES] }) export class App { objArray:TestObject[]; selectedObject:TestObject; constructor(){ this.objArray = [{name: 'foo', value: 1}, {name: 'bar', value: 1}]; this.selectedObject = this.objArray[1]; } updateSelectedValue(event:ssortingng): void{ this.selectedObject = JSON.parse(event); } }