如何使用select/选项/ NgFor Angular2中的对象数组

我无法在Angular2中创build一个由对象数组支持的select，而不是string。 我知道如何在AngularJS中使用ngOptions来实现它，但是它似乎在Angular2中没有用（我使用的是alpha 42）。

在下面的示例中，我有四个select，但只有两个工作。

1. 'selectstring'是一个简单的基于string的select，它工作正常。
2. “通过双向绑定select对象”是我尝试使用双向绑定。 不幸的是，它失败的方式有两种 – 当页面加载时，select显示错误的值（foo而不是bar），当我在列表中select一个选项时，值['object Object]'被发送到后备存储而不是正确的价值。
3. “通过事件select对象”是我试图从$事件获取选定的值。 它也以两种方式失败 – 初始加载与＃2相同的方式是不正确的，当我在列表中select一个选项时，从事件中检索“[object Object]”值，所以我不能得到正确的价值。 select被清除。
4. “通过stringselect对象”是使用工作对象的唯一方法。 不幸的是，它通过使用＃1的string数组并将string的值转换为对象并将其转换回来。

我可以做＃4，如果这是预期的方式，但它似乎很笨重。 还有另一种方法吗？ 我只是在阿尔法呢？ 我做了些傻事吗？

import {Component, FORM_DIRECTIVES, NgFor} from 'angular2/angular2'; interface TestObject { name:string; value:number; } @Component({ selector: 'app', template: ` <h4>Select String</h4> <select [(ng-model)]="strValue"> <option *ng-for="#o of strArray" [value]="o">{{o}}</option> </select> <h4>Select Object via 2-way binding</h4> <select [(ng-model)]="objValue1"> <option *ng-for="#o of objArray" [value]="o">{{o.name}}</option> </select> <h4>Select Object via event</h4> <select [ng-model]="objValue2" (change)="updateObjValue2($event)"> <option *ng-for="#o of objArray" [value]="o">{{o.name}}</option> </select> <h4>Select Object via string</h4> <select [ng-model]="objValue3.name" (change)="updateObjValue3($event)"> <option *ng-for="#o of strArray" [value]="o">{{o}}</option> </select> <div><button (click)="printValues()">Print Values</button></div> `, 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:string[] = this.objArray.map((obj:TestObject) => obj.name); strValue:string = this.strArray[1]; updateObjValue2(event:Event):void { const value:string = (<HTMLSelectElement>event.srcElement).value; this.objValue2 = this.objArray.find((obj:TestObject) => obj.name === value); } updateObjValue3(event:Event):void { const value:string = (<HTMLSelectElement>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); } } 

Answer 1

我不知道在alpha中是什么东西，但我现在正在使用beta 12，这工作正常。 如果你有一个对象数组，创build一个像这样的select：

 <select [(ngModel)]="simpleValue"> // value is a string or number <option *ngFor="#obj of objArray" [value]="obj.value">{{obj.name}}</option> </select> 

如果你想匹配实际的对象，我会这样做：

 <select [(ngModel)]="objValue"> // value is an object <option *ngFor="#obj of objArray" [ngValue]="obj">{{obj.name}}</option> </select> 

Answer 2

我不是DOM或Javascript / Typescript的专家，但我认为，DOM标签不能处理真正的JavaScript对象。 但把整个对象作为一个string，并parsing回一个对象/ JSON为我工作：

 interface TestObject { name:string; value:number; } @Component({ selector: 'app', template: ` <h4>Select Object via 2-way binding</h4> <select [ngModel]="selectedObject | json" (ngModelChange)="updateSelectedValue($event)"> <option *ngFor="#o of objArray" [value]="o | json" >{{o.name}}</option> </select> <h4>You selected:</h4> {{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:string): void{ this.selectedObject = JSON.parse(event); } }