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

これは実際には正常に動作します。

私はこの古い問題の大きなマークRajcokの助けと彼の答えから、この時点になった：、私はnavSelectedで選択した値を渡すことができるようにしたいと述べたHow can I get new selection in "select" in Angular 2?

（）関数呼び出し。私はそれをどうやって行うのか分かりません。

私はオプションタグに他の検索から野生の推測に[ngValue]="button"を追加し、(change)イベントハンドラでbutton変数を参照しようとしている（そう：。(change)="navSelected(button.label)"およびその他のコンボは、無駄に私は多くのを見てきましたngModelへの参照は古くなっているようですが、私はそれらがもう適用されないと完全にはわかりません（とにかくRC4で動作させることができませんでした）。値を取得してください、しかし、それは関数を正しく呼び出すことができるだけの場合と比べて、非常にリッキーな感じです。

Answer 1

あなたが見ている価値forは$event.targetにあり、$event.target.valueで取得できます。下記の私の例をご覧ください。

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

あなたが@eltonkamamiの答えのためのショートカットとして、この

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

Answer 2

を行うことができますオプションの選択したテキストを取得するために探しているなら、あなたはこのようなあなたのオブジェクトを渡すことができます。

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