将每个数组元素绑定到选项标签答案

【问题标题】：Bind each array element to option tag将每个数组元素绑定到选项标签
【发布时间】：2016-11-22 09:45:19
【问题描述】：

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

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

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

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

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

但是

(click)="onSelect(hero)"

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

【问题讨论】：

标签： typescript angular

【解决方案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);
}

【讨论】：

难道 [(ngModel)]="selectedPerso" 和 (change)="onChange($event)" 是多余的吗？
是的，我假设您想在更改时执行一些代码。

【解决方案2】：

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

我会将对象的 id 绑定到 option 元素的 [value] 属性并使用 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

【讨论】：