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

Posted 2023-03-13

【中文标题】如何在angular2中的选择更改事件中获取值

【英文标题】：How to get the value in a select change event in angular2

【发布时间】：2016-11-26 21:43:41

【问题描述】：

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

为此，我有这个：

---在模板中---

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

只要说“navButtons”是一个具有“标签”字段的对象数组就足够了。

---在课堂上---

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

这实际上工作正常。

在 Mark Rajcok 的大力帮助和他在这个较早的问题中的回答中，我达到了这一点： How can I get new selection in "select" in Angular 2?

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

我尝试将其他搜索中的疯狂猜测添加[ngValue]="button" 到选项标签，然后在(change) 事件处理程序中引用button 变量（因此：(change)="navSelected(button.label)" 和其他组合，但无济于事。我看过很多对 ngModel 的引用，但它们看起来很旧，我不完全确定它们是否适用（而且我无法让它们在 RC4 中正常工作）。

我可能会拉出一些 jquery 或其他任何东西来找到选择并获得它的值，但与简单地能够正确调用函数相比，这似乎非常糟糕。

【问题讨论】：

你需要获取button.route还是button.label？

任一。实际上，按钮对象中的任何内容都表示选择了哪个项目。即使是 ngFor 的索引也可以。

【参考方案1】：

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

$any($event.target).value

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

【参考方案2】：

您要查找的值在$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!");

【讨论】：

在将 button.route 的绑定更改为 button.route 之后就可以了。如果我只是想获取传入的对象（按钮）而不是值字符串怎么办？

如果您需要动态值属性，则必须以这种方式绑定[value]="button.route"。

所以我将绑定更改为[value]="button"。 （再次尝试获取对象本身）。在我的 navSelected(navName) 函数中，我看到输出到控制台的按钮对象的 toString() 结果。耶。但是，如果我尝试像访问对象一样访问对象并输出它的参数：console.log(navName.route) 我得到未定义。

@lowcrawler 现在就像您必须使用JSON.parse(value).route 的对象的字符串化版本。它使事情变得比他们需要的更复杂。如果你能坚持通过你需要的路线或标签

酷，谢谢。您的第一个 cmets 解决了我遇到的直接问题，然后我只是想了解更多。谢谢你放纵我。

【参考方案3】：

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