Question

我正在尝试将数组元素从类绑定到选项标记。

在angular.io＆＃34;英雄之旅＆＃34;教程（https://angular.io/docs/ts/latest/tutorial/toh-pt2.html）他们为列表执行以下操作：

  <li *ngFor="let hero of heroes"
    (click)="onSelect(hero)">
    <span class="badge">{{hero.id}}</span> {{hero.name}}
  </li>

如果我理解正确 * ngFor =＆＃34;让英雄的英雄＆＃34; 将每个英雄（因此英雄数组中的每个元素）与li元素相关联然后显示例如，{{hero.id}}的相关英雄的一些特征。

我说员工是因为如果它只是一个带印刷品的简单循环，我不会看到他们如何在使用onSelect（英雄）之后取回英雄对象。

我一直试图用选项做同样的事情：

   <option *ngFor="let perso of persos">
     <span>{{perso.id}} : </span> {{perso.nom}}
   </option>

但是

(click)="onSelect(hero)"

没有效果，因为点击事件不会被选项触发。我无法找到正确的触发器。任何帮助和附加信息都非常受欢迎。

Answer 1

对于那些原生HTML元素，Angular 2提供了双向绑定，因此您可以直接使用ngModel绑定您的值 - 这适用于所有输入标记。因此，如果手动更改选择，它还会使用当前值更新该变量。此外，如果以编程方式更改selectedPerso，则视图会使用新选择进行更新。

<select [(ngModel)]="selectedPerso" (change)="onChange($event)">
    <option *ngFor="let perso of persos" [value]="perso.id">
        <span>{{perso.id}} : </span> {{perso.nom}}
    </option>
</select>

在组件类主体中，您可以使用默认值定义该绑定变量，该默认值在页面加载时预先选择：

selectedPerso: number = persos[0].id;

onChange(event) {
    console.log("Selection changed: ", event);
}

Answer 2

您无法将对象绑定到[value]元素的option属性。

我会将对象的ID绑定到[value]元素的option属性，并使用(change)的{{1}}事件。

请参阅以下示例：

select

请参阅此处的完整示例：http://plnkr.co/edit/OOYx3LiN1pO3qffKn7lq

将每个数组元素绑定到选项标记

2 个答案: