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

Question

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

在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=“让英雄英雄”会将每个英雄(因此英雄数组中的每个元素)关联到一个li元素，然后显示相关英雄的一些特征，例如{hero.id}。

我之所以这样说，是因为如果它只是一个简单的带有打印的循环，我看不出他们是如何在使用onSelect(英雄)之后取回英雄对象的。

我一直在尝试在选项上做同样的事情：

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

但

(click)="onSelect(hero)"

是无效的，因为单击事件不会用选项触发。我找不到合适的扳机。任何帮助和补充信息都是非常欢迎的。

Answer 1

不能将对象绑定到option元素的option属性。

我将将对象的id绑定到option元素的option属性，并使用select的(change)事件。

见下面的例子：

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    Select your favorite serie:

    <select (change)="onChange($event.target.value)">
      <option *ngFor="let serie of series" [value]="serie.id">{{ serie.name }}</option>
    </select>

    <br />
    <br />

    Selected Serie: <br />
    <span *ngIf="selectedSerie">
      {{ selectedSerie.id  }} - {{ selectedSerie.name }}
    </span>
  `
})
export class AppComponent {

  private series: any[];
  private selectedSerie: any;

  constructor() {
    this.series = [
      { id: 1, name: 'Friends' },
      { id: 2, name: 'How I met Your Mother' },
      { id: 3, name: 'Modenr Family' }
    ];

    this.selectedSerie = this.series[0];
  }

  onChange(serieId: any): void {
    this.selectedSerie = this.series.find(serie => serie.id == serieId);
  }
}

参见这里的完整示例：http://plnkr.co/edit/OOYx3LiN1pO3qffKn7lq

Answer 2

对于那些本地的HTML元素，角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);
}