如何在 Angular2 中的对象数组上使用 select/option/NgFor [英] How to use select/option/NgFor on an array of objects in Angular2

问题描述

我在 Angular2 中创建由对象数组而不是字符串支持的选择时遇到问题.我知道如何使用 ngOptions 在 AngularJS 中做到这一点，但它似乎在 Angular2 中不起作用(我使用的是 alpha 42).

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.

1. 'Select String' 是一个简单的基于字符串的选择，它工作正常.
2. 通过 2 路绑定选择对象"是我尝试使用 2 路绑定.不幸的是，它以两种方式失败 - 当页面加载时，选择显示错误的值(foo 而不是 bar)，当我在列表中选择一个选项时，值 '[object Object]' 被发送到后备存储而不是正确的值.
3. 通过事件选择对象"是我尝试从 $event 中获取选定值的尝试.它也以两种方式失败 - 初始加载与 #2 一样不正确，当我在列表中选择一个选项时，值 '[object Object]' 是从事件中检索的，所以我不能得到正确的值.选择被清除.
4. 通过字符串选择对象"是使用有效对象的唯一方法.不幸的是，它确实通过使用 #1 中的字符串数组并将值从字符串转换为对象并返回.

如果这是预期的方式，我可以做 #4，但它看起来很笨拙.还有另一种方法吗?我在 alpha 阶段还为时过早吗?我做了什么傻事吗?

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

推荐答案

我不知道 Alpha 版的情况如何，但我现在使用的是 Beta 12，这很好用.如果您有一个对象数组，请像这样创建一个选择:

I don't know what things were like in the alpha, but I'm using beta 12 right now and this works fine. If you have an array of objects, create a select like this:

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

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

If you want to match on the actual object, I'd do it like this:

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

这篇关于如何在 Angular2 中的对象数组上使用 select/option/NgFor的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！