☰

選択タグ (Angular 2) で ngModel の変更を検出するにはどうすればいいですか? 質問する

tag-icon • tag-icon javascript angular
選択タグ (Angular 2) で ngModel の変更を検出するにはどうすればいいですか? 質問する

ngModelタグの の変更を検出しようとしています。Angular 1.x では、の を使用するか、 を使用することで<select>この問題を解決できるかもしれませんが、Angular 2 で の変更を検出する方法をまだ理解していません。$watchngModelngChangengModel

完全な例: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変更内容とビュー内の補間式にそれが反映されます。

クラス/コントローラーのこの変更について通知を受け取るにはどうすればよいですか?

ベストアンサー1

アップデート:

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

<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)">

plunker

参照Angular 2 の「select」で新しい選択を取得するにはどうすればよいですか?

おすすめ記事