如何檢測選擇標簽（Angular 2）上對 ngModel 的更改？

Question

我正在嘗試檢測<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會發生變化，並且視圖中的插值表達式反映了這一點。

如何在我的班級/控制器中收到此更改的通知？

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

然后您就不必在事件處理程序中更新模型，但我相信這會導致觸發兩個事件，因此效率可能較低。

---

舊答案，在他們修復 beta.1 中的錯誤之前：

創建一個本地模板變量並附加一個(change)事件：

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

笨蛋

另請參閱如何在 Angular 2 的“選擇”中獲得新選擇？

Answer 2

我偶然發現了這個問題，我將提交我使用過並且工作得很好的答案。 我有一個過濾對象數組的搜索框，在我的搜索框中我使用了(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
}