[解決済み] selectタグのngModelの変更を検出する方法（Angular 2）?

質問

の変更を検出しようとしています。 ngModel にある <select> タグを使用します。Angular 1.xでは、これを解決するために $watch の上に ngModel を使用するか、または ngChange への変更を検出する方法はまだ理解していません。 ngModel の変更を検出する方法はまだ理解していません。

完全な例 : http://plnkr.co/edit/9c9oKH1tjDDb67zdKmr9?p=info

import {Component, View, Input, } from 'angular2/core';
import {FORM_DIRECTIVES} from 'angular2/common';

@Component({
    selector: 'my-dropdown'
})
@View({
    directives: [FORM_DIRECTIVES],
    template: `
        <select [ngModel]="selection" (ngModelChange)="onChange($event, selection)" >
            <option *ngFor="#option of options">{{option}}</option>
        </select>
        {{selection}}
    `
})
export class MyDropdown {
    @Input() options;

    selection = 'Dog';

    ngOnInit() {
        console.log('These were the options passed in: ' + this.options);
  }

  onChange(event) {
    if (this.selection === event) return;
    this.selection = event;
    console.log(this.selection);
  }

}

見ての通り、もしドロップダウンから別の値を選択すると、私たちの ngModel は変化し、ビューの補間された式はこれを反映します。

この変更をクラス/コントローラで通知するにはどうしたらよいでしょうか？

どのように解決するのですか？

更新 :

イベントとプロパティのバインディングを分離する。

<select [ngModel]="selectedItem" (ngModelChange)="onChange($event)">

onChange(newValue) {
    console.log(newValue);
    this.selectedItem = newValue;  // don't forget to update the model here
    // ... do other stuff here ...
}

を使うこともできます。

<select [(ngModel)]="selectedItem" (ngModelChange)="onChange($event)">

とすれば、イベントハンドラでモデルを更新する必要がなくなりますが、これだと2つのイベントが発生するので、おそらく効率が悪くなると思います。

古い回答ですが、ベータ.1でバグを修正する前のものです。

ローカルテンプレート変数を作成し (change) イベントを追加します。

<select [(ngModel)]="selectedItem" #item (change)="onChange(item.value)">

プランカー

参照 Angular 2の"select"で新しい選択範囲を取得するにはどうすればよいですか？