代码之家 › 专栏 › 技术社区 › Viktor Hardubej

如何获得角度2中的选择值?

option data-binding select angular

-3

Viktor Hardubej · 技术社区 · 7 年前

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

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

1 回复 | 直到 7 年前

1

4

Iancovici 7 年前

在角度上,我们可以求助于 *ngFor 遍历选项。因此,创建一个包含所有选项的数组所以从组件开始。ts侧优先

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

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

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

然后回到组件。html

我们可以调用函数 change 事件,并将 事件目标属性 所以我们可以得到调用这个函数的元素的值。
我们还使用*ngFor 指令遍历itemState的所有选项,并将其分配给实例 state
我们插话使用双花括号的选项值 {{ }}

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