<分区>
我在 Angular2 中创建一个由对象数组而不是字符串支持的选择时遇到了问题。我知道如何使用 ngOptions 在 AngularJS 中做到这一点，但它似乎在 Angular2 中不起作用(我使用的是 alpha 42)。
在下面的示例中，我有四个选择，但只有两个有效。
- 'Select String' 是一个简单的基于字符串的选择，并且工作正常。
- “通过双向绑定(bind)选择对象”是我尝试使用双向绑定(bind)的尝试。不幸的是，它以两种方式失败 - 当页面加载时，选择显示错误的值(foo 而不是 bar)，当我在列表中选择一个选项时，值'[object Object]'被发送到后备存储而不是正确的值。
- “通过事件选择对象”是我尝试从 $event 中获取选定值的尝试。它也以两种方式失败——初始加载与#2 一样不正确，当我在列表中选择一个选项时，值“[object Object]”是从事件中检索的，所以我不能得到正确的值。选择被清除。
- “通过字符串选择对象”是唯一使用有效对象的方法。不幸的是，它确实可以通过使用 #1 中的字符串数组并将值从字符串转换为对象并返回。
如果这是预期的方式，我可以做#4，但它看起来很笨拙。还有另一种方法吗？我是不是太早进入了 alpha 阶段？我是不是做了什么傻事？
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);
}
}