如何使用选择/选项/ NgFor对象的Angular2阵列上 [英] How to use select/option/NgFor on an array of objects in Angular2
本文介绍了如何使用选择/选项/ NgFor对象的Angular2阵列上的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我无法创造一个Angular2选择由对象，而不是字符串数组的支持。我知道怎么做，在使用 ngOptions AngularJS，但它似乎并没有在Angular2工作（我使用的是阿尔法42）。
在下面的示例中，我有四个选择，但只有他们两个人的工作。
- 选择字符串是一个简单的基于字符串的选择，并能正常工作。
- 通过选择对象2路结合这是我尝试使用2路绑定。不幸的是，它未能在两个方面 - 在页面加载时，选择显示错误值（富而不是吧），当我选择列表中，值的翻译：一个选项被发送到后备存储而不是正确的值。
- 通过事件选择对象这是我尝试从$事件选择的值。它没有在两个方面，太 - 初始加载在相同的方式，＃2不正确的，当我选择列表中的一个选项，值'的翻译：从事件中检索，所以我不能得到正确的值。选择被清除。
- '通过字符串选择对象是使用该工作对象的唯一方法。不幸的是，它真的通过使用＃1字符串数组和转换的值从字符串对象和背部的作品。
我能做到＃4，如果这是预期的方式，但它似乎pretty笨重。是否有另一种方法？我在阿尔法只是太早了？我做一些愚蠢的？
进口{组件，FORM_DIRECTIVES，NgFor}从'angular2 / angular2';接口的TestObject {
名称：字符串;
值：数;
}@零件（{
选择：应用程序，
模板：`
＆LT; H4＆GT;选择字符串＆LT; / H4＆GT;
＆LT;选择[（NG-模式）] =strValue的＆GT;
＆LT;选项* NG换=＃ØstrArray的[值] =O＆GT; {{Ø}}＆LT; /选项＆GT;
＆LT; /选择＆GT; ＆LT; H4＆GT;通过2路结合＆LT选择对象; / H4＆GT;
＆LT;选择[（NG-模式）] =objValue1＆GT;
＆LT;选项* NG换=＃ØobjArray的[值] =O＆GT; {{o.name}}＆LT; /选项＆GT;
＆LT; /选择＆GT; ＆LT; H4＆GT;通过事件和LT选择对象; / H4＆GT;
＆LT;选择[NG模型] =objValue2（变化）=updateObjValue2（$事件）＆GT;
＆LT;选项* NG换=＃ØobjArray的[值] =O＆GT; {{o.name}}＆LT; /选项＆GT;
＆LT; /选择＆GT; ＆LT; H4＆GT;通过串下选择对象; / H4＆GT;
＆LT;选择[NG模型] =objValue3.name（变化）=updateObjValue3（$事件）＆GT;
＆LT;选项* NG换=＃ØstrArray的[值] =O＆GT; {{Ø}}＆LT; /选项＆GT;
＆LT; /选择＆GT; ＆LT; DIV＆GT;＆LT;按钮（点击）=函数printValues（）＆GT;打印价值和LT; /按钮＆GT;＆LT; / DIV＆GT; `
指令：[FORM_DIRECTIVES，NgFor]
}）
出口类AppComponent {
objArray方法：TestObject [] = {[名称：'富'，值：1}，{名称：'棒'，值：1}];
objValue1方法：TestObject = this.objArray [1];
objValue2方法：TestObject = this.objArray [1];
objValue3方法：TestObject = this.objArray [1]; strArray：字符串[] = this.objArray.map（（OBJ方法：TestObject）=＆GT; obj.name）;
strValue中：字符串= this.strArray [1]; updateObjValue2（事件：事件）：无效{
常量值：字符串=（小于HTMLSelectElement＆GT; event.srcElement）.value的; this.objValue2 = this.objArray.find（（OBJ方法：TestObject）=＆GT; obj.name ===值）;
} updateObjValue3（事件：事件）：无效{
常量值：字符串=（小于HTMLSelectElement＆GT; event.srcElement）.value的; this.objValue3 = this.objArray.find（（OBJ方法：TestObject）=＆GT; obj.name ===值）;
} 函数printValues（）{无效
的console.log（'strValue的'，this.strValue）;
的console.log（'objValue1'，this.objValue1）;
的console.log（'objValue2'，this.objValue2）;
的console.log（'objValue3'，this.objValue3）;
}
}
解决方案
我与DOM或Javascript /打字稿不是专家，但我认为DOM的代码无法处理JavaScript的真正对象莫名其妙。但把整个对象作为一个字符串和解析回一个对象/ JSON的工作对我来说：
接口的TestObject {
名称：字符串;
值：数;
}@零件（{
选择：应用程序，
模板：`
＆LT; H4＆GT;通过2路结合＆LT选择对象; / H4＆GT; ＆LT;选择[ngModel] =字符串（selectedObject）（ngModelchange）=updateSelectedValue（$事件）＆GT;
＆LT;选项* ngFor =＃ØobjArray的[值] =字符串化（O）＆GT; {{o.name}}＆LT; /选项＆GT;
＆LT; /选择＆GT; ＆LT; H4＆gt;您选择：LT; / H4＆GT; {{字符串化（selectedObject）}}
`
指令：[FORM_DIRECTIVES]
}）
出口类应用{
objArray方法：TestObject [];
selectedObject方法：TestObject;
构造函数（）{
this.objArray = [{名称：'富'，值：1}，{名称：'棒'，值：1}];
this.selectedObject = this.objArray [1];
}
字符串化（O：任意）：字符串{
返回JSON.stringify（O）;
}
updateSelectedValue（事件：字符串）：无效{
this.selectedObject = JSON.parse（事件）;
}
}
I'm having trouble creating a select in Angular2 that is backed by an array of Objects instead of strings. I knew how to do it in AngularJS using ngOptions, but it doesn't seem to work in Angular2 (I'm using alpha 42).
In the sample below, I have four selects, but only two of them work.
- 'Select String' is a simple string-based select, and it works fine.
- 'Select Object via 2-way binding' was my attempt to use 2-way binding. Unfortunately, it fails in two ways - when the page loads, the select shows the wrong value (foo instead of bar), and when I select an option in the list, the value '[object Object]' gets sent to the backing store instead of the correct value.
- 'Select Object via event' was my attempt to get the selected value from $event. It fails in two ways, too - the initial load is incorrect in the same way as #2, and when I selection an option in the list, the value '[object Object]' is retrieved from the event, so I can't get the right value. The select gets cleared.
- 'Select Object via string' is the only approach that uses an object that works. Unfortunately, it really works by using the string array from #1 and converting the value from string to object and back.
I can do #4 if that's the intended way, but it seems pretty clunky. Is there another approach? Am I just too early in the alpha? Did I do something silly?
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);
}
}
解决方案
I'm no expert with DOM or Javascript/Typescript but i think that the DOM-Tags can't handle real javascripts object somehow. But putting the whole object in as a string and parsing it back to an Object/Json worked for me:
interface TestObject {
name:string;
value:number;
}
@Component({
selector: 'app',
template: `
<h4>Select Object via 2-way binding</h4>
<select [ngModel]="stringify(selectedObject)" (ngModelchange)="updateSelectedValue($event)">
<option *ngFor="#o of objArray" [value]=stringify(o) >{{o.name}}</option>
</select>
<h4>You selected:</h4> {{stringify(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];
}
stringify(o:any): string{
return JSON.stringify(o);
}
updateSelectedValue(event:string): void{
this.selectedObject = JSON.parse(event);
}
}
这篇关于如何使用选择/选项/ NgFor对象的Angular2阵列上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
