如何在选择标记(角度2)上检测 ngModel 的更改？

我试图在 <select>标记中检测 ngModel上的变化。在角度1.x 中，我们可以使用 ngModel上的 $watch或者使用 ngChange来解决这个问题，但是我还没有理解如何在角度2中检测到 ngModel的变化。

Full Example: 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就会发生变化，而视图中的内插表达式反映了这一点。

如何在类/控制器中获得此更改的通知？

206302 次浏览
小开
最佳答案

更新 :

将事件绑定和属性绑定分开:

<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 ...
}

You could also use 

<select [(ngModel)]="selectedItem" (ngModelChange)="onChange($event)">

然后您就不必在事件处理程序中更新模型，但是我相信这会导致两个事件触发，所以它可能效率较低。

旧的答案，在他们修复测试版的 bug 之前。1:

创建一个本地模板变量并附加一个 (change)事件:

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

plunker

参见 如何在角度2的“选择”中获得新的选择？

小开

我偶然发现了这个问题，我会提交我的答案，我使用和工作相当不错。我有一个搜索框，过滤和数组的对象，在我的搜索框我使用的 (ngModelChange)="onChange($event)"

in my .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
}

提交答案