2015-12-21 15 views
44

<select>タグのngModelの変更を検出しようとしています。 http://plnkr.co/edit/9c9oKH1tjDDb67zdKmr9?p=info選択タグ(角度2)のngModelへの変更を検出

:アンギュラ1.xでは、角度2

ngModelに変化を検出する方法を理解するために、我々は、またはngChangeを使用してngModel$watchでこれを解決する可能性がありますが、私はまだきました

ご覧のとおり、ドロップダウンから別の値を選択するとngModelが変更され、ビュー内の補間された式にはこれが反映されます。

クラス/コントローラでこの変更を通知する方法を教えてください。

+1

追加のコメントの一部をチェックしておきたい場合があります。あなたはこの質問が偽装の暴言であることを示すことを望まない。 http://stackoverflow.com/help/dont-ask。 – Claies

答えて

125

更新

別のイベントとプロパティバインディング:

<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つのイベントが発生すると考えられますので、おそらく効率は低くなります。


旧答え、彼らはbeta.1のバグを修正する前に:

は、ローカルテンプレート変数を作成し、(change)イベントを添付:

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

plunker

参照してください。またHow can I get new selection in "select" in Angular 2?

+0

'item'という新しい変数をバインドしているだけなので、' ngModel'のポイントは何ですか?イベントリスナーを取得するために 'ngModel'を括弧で囲むのはポイントではないので、なぜ新しい変数を導入するのでしょうか? – lux

+1

@lux、ええ、良い質問です。 'selectedItem'は私たちのバインドされたデータです.NgModelは自動的に更新されますが、それは良くない(ビューなどが更新される)変更を私たちに通知するものではありませんが、使用事例。私が参照した他の質問では、変更を通知するために '(ngModelChange)'をどのように使用しようとしたのかを記述しますが、変更ごとに2回呼び出されます。それがバグかどうかはわかりません。とにかく、 '(変更)'イベントバインディングを追加することは、この問題を解決するようです。 –

+0

また、 'onChange()'が発生したときに 'selectedItem'が更新されないことを示すplunkerを更新しました。そのため、ローカルテンプレート変数が必要なようです。 –

7

私はこの質問に遭遇し、私は私が使用し、かなりうまくいった答えを提出します。私は、フィルタリング検索ボックスを持っていたし、オブジェクトの配列と私の検索ボックスに、私は私の.html

<input type="text" [(ngModel)]="searchText" (ngModelChange)="reSearch(newValue)" placeholder="Search"> 

(ngModelChange)="onChange($event)"

を使用し、その後、私のcomponent.ts

reSearch(newValue: string) { 
    //this.searchText would equal the new value 
    //handle my filtering with the new value 
} 
+4

FYI、 'ngModelChange'にバインドするとき、' $ event'はDOM [Event](https://developer.mozilla.org/en-US/docs/Web/API/Event)ではありません。むしろ、それは入力要素の文字列であるform要素の現在の値です。 –

+0

@MarkRajcokあなたは私の開発チームの残りの部分と共有することができますので、このドキュメントのポイントを教えてくださいできますか? –

+1

@NeilS、最も近いのはhttps://angular.io/docs/ts/latest/guide/template-syntax.html#!#ngModelです –

-2

で、これは実際に検出されません。モデルが変更されると、入力フィールドの変更イベントが検出されます。たとえば、入力フィールドの値が「my_search_word」で、その値を「my_search_word_2」に変更して「my_search_word」に戻すと、モデル値は実際には変更されませんが、reSearch($event)は変更があると考えています。

関連する問題