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

Posted 2023-03-13

【中文标题】将每个数组元素绑定到选项标签

【英文标题】：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)"

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

【参考方案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