如何在angular2中的select change事件中获取值

Question

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

为此，我有以下几点：

---在模板中---

<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!");
}

这实际上工作正常。

我是在马克·拉科克的大力帮助下得出这一点的，他在这个老问题上给出了答案：如何在Angular 2中的“select”中获得新的选择？

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

我尝试将其他搜索中的任意猜测添加到选项标记中，然后引用事件处理程序（所以：（change）=“navSelected（button.label）”中的按钮变量和其他组合，但没有成功。我看到了很多对ngModel的引用，但它们似乎很旧，我不完全确定它们是否适用了（而且我无法让它们在RC4中工作）。

我可能会拉一些jquery或任何东西来找到select并获取它的值，但与简单地正确调用函数相比，这似乎很难做到。




Answer 1

而不是$事件。尝试使用下面的类型转换函数。

$any（$event.target）. value

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

Answer 2

作为@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);
}

Answer 3

您要查找的值位于$事件上。设置目标，您可以使用$event获取目标。目标值，请参见下面的示例。

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!");
}