2016-06-18 17 views
0

私はフィルタとして複数のドロップダウンを持つページを持っています。また、フィルタリングを行うためにドロップダウンが変更されたときの関数リスナがあります。角度2のバインディングとイベントの検出

<select [(ngModel)]="filters.foo" (change)="update()">...</select> 
<select [(ngModel)]="filters.bar" (change)="update()">...</select> 
<select [(ngModel)]="filters.quz" (change)="update()">...</select> 
<select [(ngModel)]="filters.lol" (change)="update()">...</select> 
<select [(ngModel)]="filters.wtf" (change)="update()">...</select> 

私のupdate()機能が実行されると、フィルタオブジェクトはまだ更新されていません。

This plunkerは、ページをロードし、入力に何も入力し、問題を示しています

は、どのように私はモデルが更新された後にのみupdate()呼び出すことができますか?

答えて

0

解決策を見つけました:ネイティブイベントを聞く代わりに、ngModelChangeイベントに耳を傾けます。

<select [(ngModel)]="filters.foo" (ngModelChange)="update()">...</select> 

I read somewhereあなたはこの

<!-- THIS DIDN'T WORK FOR ME --> 
<select [ngModel]="filters.foo" (ngModelChange)="update()">...</select> 

ようngModelから括弧を削除することができますしかし、これは私のために動作しませんでしたので、私は括弧を去り、今では完璧に動作します:)

+1

第二スニペットを'[property]'はコンポーネントからテンプレートへのみデータを伝播するだけなので、ドロップダウンのオプションを選択して手動で更新すると、 'filters.foo'は更新されません。そのためには、データをテンプレートからコンポーネントに伝播する '(property)'構文を使用する必要があります。両方の動作が必要な場合は、最初のスニペットで使用した '[(property)]'を使う必要があります。何が問題になったのかを明確にしたいだけです。 – codef0rmer