web-dev-qa-db-ja.com

選択タグでngModelへの変更を検出する（Angular 2）

<select>タグ内のngModelの変更を検出しようとしています。 Angular 1.xでは、これをngModelの$watchで、またはngChangeを使用して解決することができますが、Angular 2で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が変わり、ビュー内の補間された式にこれが反映されます。

クラス/コントローラのこの変更をどうやって通知するのですか？

javascriptangular
71
lux

更新：

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

<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

Angular 2の "select"で新しい選択を取得する方法は？ も参照してください。

194
Mark Rajcok

私はこの質問に出くわしたので、私が使った、そしてうまくいった答えを提出します。検索ボックスにフィルターをかけてオブジェクトの配列を作成し、検索ボックスに(ngModelChange)="onChange($event)"を使用しました。

私の.htmlに

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

それから私のcomponent.tsに

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