如何獲得angular2中選擇更改事件中的值

我想導航使用動態生成的選擇下拉菜單。它沒有出現，我可以直接這樣做，所以我只想在選擇更改時進行函數調用。如何獲得angular2中選擇更改事件中的值

爲了做到這一點，我有這樣的：

---在模板---

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

我只想說的是「navButtons」是有一個「標籤對象的數組'字段。

---在類---

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

這其實工作正常。

我從馬克Rajcok的大力幫助和他的回答在這個舊的問題，這一點： How can I get new selection in "select" in Angular 2?

這麼說，我想能夠在navSelected傳遞選定值（）函數調用。我不確定如何做到這一點。

我試圖從其他搜索到選項標籤的胡亂猜測加[ngValue]="button"，然後引用了(change)事件處理button變量（這樣：(change)="navSelected(button.label)"等連擊，都無濟於事，我看到了很多的引用ngModel，但他們似乎很老，我不完全相信他們適用了（我無法讓他們在RC4工作）

我可能會拉一些jQuery或任何出去找到選擇和得到它的價值，但似乎很rinky，丁克相比，只是能夠正確地調用該函數。

來源

2016-07-22 lowcrawler

你需要得到button.route或button.label？ – eltonkamami

任一。真的，從按鈕對象的任何東西來表示選擇哪個項目。即使ngFor的索引也沒問題。 – lowcrawler

你looki值ng代表$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!"); 
}

來源

2016-07-22 22:07:08 eltonkamami

將button.route的綁定更改爲可用的「{{button.route}}」。如果我只是想讓傳入的對象（按鈕）而不是值字符串？ – lowcrawler

如果您需要動態值屬性，則必須以此方式綁定'[value] =「button.route」'。 – eltonkamami

所以我改變綁定到'[value] =「按鈕」'。（再次嘗試獲取對象，本身）。在我的navSelected（navName）函數中，我看到輸出到控制檯的按鈕對象的toString（）結果。好極了。但是，如果我嘗試像對象一樣訪問對象並輸出它的參數：'console.log（navName.route）'我得到未定義的值。 – lowcrawler

至於@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); 
}

來源

2017-07-10 13:00:09

如何獲得angular2中選擇更改事件中的值

回答

相關問題