"如何在angular2中的選擇更改事件中獲取值"

Question

我想使用動態生成的選擇下拉菜單進行導航。 看來我不能直接這樣做，所以我只想在選擇更改時進行函數調用。

為此，我有這個：

---在模板中---

<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 的大力幫助和他在這個較早的問題中的回答中，我走到了這一點： 如何在 Angular 2 的“選擇”中獲得新的選擇？

也就是說，我希望能夠在 navSelected() 函數調用中傳遞選定的值。 我不確定該怎么做。

我嘗試將[ngValue]="button"從其他搜索中添加到選項標簽中，然后在(change)事件處理程序中引用button變量（因此： (change)="navSelected(button.label)"和其他組合，無濟於事。我已經看到很多對 ngModel 的引用，但它們看起來很舊，我不完全確定它們是否適用（而且我無法讓它們在 RC4 中工作）。

我可能會拉出一些 jquery 或其他任何東西來找到選擇並獲得它的值，但與簡單地能夠正確調用函數相比，這似乎非常糟糕。

Answer 1

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

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。 嘗試使用下面的類型轉換函數。

$any($event.target).value

這將停止模板中的類型檢查。