我正在尝试检测ngModel
标记中<select>
的更改。在Angular 1.x中,我们可以使用$watch
上的ngModel
或使用ngChange
解决此问题,但我还没有了解如何检测ngModel
的更改1}}在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
会发生更改,并且视图中的插值表达式会反映这一点。
如何在班级/控制员中收到有关此更改的通知?
答案 0 :(得分:191)
<强>更新强>:
分隔事件和属性绑定:
<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)">
答案 1 :(得分:10)
我偶然发现了这个问题,我将提交我使用过的答案并且工作得非常好。我有一个过滤的搜索框和对象数组,在我的搜索框中我使用了(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
}