如何在angular2中获取选择更改事件中的值

How to get the value in a select change event in angular2

本文关键字：事件 获取 angular2 选择      更新时间：2023-09-26

我想使用动态生成的选择下拉菜单进行导航。我似乎不能直接这样做，所以我只想在选择更改时进行函数调用。

要做到这一点，我有这个：

---在模板中---

<select (change)="navSelected($event)">
    <option *ngFor="let button of navButtons;"
    value="button.route" >{{button.label}}</option>
</select>

只要说"navButtons"是一个具有"label"字段的对象数组就足够了。

---在课堂上---

navSelected(navName) {
    console.log(navName + " Clicked!");
}

这实际上很有效。

我之所以走到这一步，得益于Mark Rajcok的大力帮助和他对这个老问题的回答：我如何在"；选择"；在Angular 2中？

也就是说，我希望能够在navSelected（）函数调用中传递选定的值。我不知道该怎么做。

我曾尝试将来自其他搜索的猜测添加到选项标记中的[ngValue]="button"，然后在(change)事件处理程序中引用button变量（所以：(change)="navSelected(button.label)"和其他组合框，都没有用。我看到了很多对ngModel的引用，但它们似乎很旧，我不完全确定它们是否适用（而且我无论如何都无法在RC4中使它们工作）。

我可能可以提取一些jquery或其他什么来找到select并获得它的值，但与简单地正确调用函数相比，这似乎非常糟糕。

您要查找的值在$event.target上，您可以使用$event.target.value获得它，请参阅下面的示例。

navSelected($event) {
    console.log($event.target.value + " Clicked!");
}

如果你想获得选项的选定文本，你可以做这个

navSelected($event) {
    let selectElement = $event.target;
    var optionIndex = selectElement.selectedIndex;
    var optionText = selectElement.options[optionIndex];
    console.log(optionText + " Clicked!");
}

作为@eltonkamami答案的快捷方式，您可以这样传递对象：

<select (change)="navSelected(navButtons[$event.target.selectedIndex])">
    <option *ngFor="let button of navButtons;">{{button.label}}</option>
</select>

并像这样捕捉：

navSelected(button: [type of navButtons]){
    console.log(button);
}

而不是$event。请尝试使用以下类型转换函数。

$any（$event.target）.value

这将停止模板中的类型检查。

相关文章：