如何在 Angular 2 中获取 select 值？

Question

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

<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>

Answer 1

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

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

然后我们可以在检测到变化时调用函数并定义行为。

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

然后回到component.html

我们可以在 change 事件上调用函数，并将其提供给 事件目标属性 这样我们就可以得到值调用此函数的元素。
我们还使用*ngFor 指令遍历itemState的所有选项，并将其赋值给一个实例state
我们使用双花括号插入选项值{{ }}

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

如何在 Angular 2 中获取 select 值？

how can I get select value in Angular 2?

angular

select

data-binding

option