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.
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); } }