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

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

在角度，我们可以诉诸*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>