如何在 Angular 2 中获得选择值？答案

【问题标题】：how can I get select value in Angular 2?如何在 Angular 2 中获得选择值？
【发布时间】：2018-06-12 06:43:35
【问题描述】：

我想将所选选项的值传递给函数。提前致谢！

<select>
    <option value="all" selected></option>
    <option value="pending">Pending</option>
    <option value="accepted">Accepted</option>
    <option value="inprogress">In progress</option>
    <option value="completed">Completed</option>
</select>

【问题讨论】：

angular.io/docs

标签： angular select data-binding option

【解决方案1】：

在 Angular 中，我们可以诉诸 *ngFor 来遍历选项。所以创建一个包含所有选项的数组所以先从component.ts这边开始

  itemState = [
    'all',
    'pending',
    'accepted',
    'inprogress',
    'completed'
  ];

当我们检测到变化时，我们可以调用一个函数并定义一个行为。

  onChange(value: any){
    console.log(value);
  }

然后回到component.html

我们可以在change事件上调用函数，并将事件目标属性提供给它，这样我们就可以得到调用该函数的元素的值。
李>
我们还使用 *ngFor directive 来遍历 itemState 的所有选项，并将其分配给实例 state
我们使用双花括号 {{ }}

内插

<select (change)="onChange($event.target.value)">
  <option *ngFor="let state of itemState" value="{{state}}">{{state}}</option>
</select>

【讨论】：