javascript - 如何检测选择标签(Angular 2)上对 ngModel 的更改？

Question

我正在尝试检测 ngModel 上的变化在<select>标签。在 Angular 1.x 中，我们可以用 $watch 来解决这个问题在 ngModel ，或使用 ngChange , 但我还不明白如何检测到 ngModel 的变化在 Angular 2 中。

完整示例: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变化， View 中的内插表达式反射(reflect)了这一点。

如何在我的类/ Controller 中收到此更改的通知？

Answer 1

更新:

分离事件和属性绑定(bind):

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

plunker

另见 How can I get new selection in "select" in Angular 2?