typescript - 将每个数组元素绑定(bind)到选项标签

Question

我正在尝试将一个数组元素从一个类绑定(bind)到一个选项标签。

在 angular.io“英雄之旅”教程 (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="let hero of heroes" 会将每个英雄(因此英雄数组中的每个元素)关联到一个 li 元素，然后显示关联的一些特征例如带有 {{hero.id}} 的英雄。

我说 associate 是因为如果它只是一个带有打印的简单循环，我不明白他们如何在使用 onSelect(hero) 之后取回 hero 对象。

我一直在尝试对选项做同样的事情:

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

但是

(click)="onSelect(hero)"

无效，因为选项不会触发点击事件。我找不到合适的触发器。非常欢迎任何帮助和其他信息。

Answer 1

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

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

并且在您的组件类主体中，您使用在页面加载时预选的默认值定义该绑定(bind)变量:

selectedPerso: number = persos[0].id;

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