Javascript 检测选择标签上对 ngModel 的更改（Angular 2）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34405301/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Detect change to ngModel on a select tag (Angular 2)
提问by lux
I am attempting to detect a change on ngModelin a <select>tag. In Angular 1.x, we might solve this with a $watchon ngModel, or by using ngChange, but I've yet to understand how to detect a change to ngModelin Angular 2.
我试图发现一个变化ngModel的<select>标签。在 Angular 1.x 中，我们可能会使用$watchonngModel或使用 来解决这个问题ngChange，但我还没有理解如何检测ngModelAngular 2 中的更改。
Full Example: http://plnkr.co/edit/9c9oKH1tjDDb67zdKmr9?p=info
完整示例：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);
}
}
As we can see, if we select a different value from the dropdown, our ngModelchanges, and the interpolated expression in the view reflects this.
正如我们所见，如果我们从下拉列表中选择不同的值，我们的ngModel更改和视图中的内插表达式将反映这一点。
How do I get notified of this change in my class/controller?
我如何在我的类/控制器中收到此更改的通知？
回答by Mark Rajcok
Update:
更新：
Separate the event and property bindings:
分离事件和属性绑定：
<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)">
and then you wouldn't have to update the model in the event handler, but I believe this causes two events to fire, so it is probably less efficient.
然后你就不必在事件处理程序中更新模型，但我相信这会导致两个事件触发，所以它可能效率较低。
Old answer, before they fixed a bug in beta.1:
旧答案，在他们修复 beta.1 中的错误之前：
Create a local template variable and attach a (change)event:
创建一个本地模板变量并附加一个(change)事件：
<select [(ngModel)]="selectedItem" #item (change)="onChange(item.value)">
See also How can I get new selection in "select" in Angular 2?
回答by Logan H
I have stumbled across this question and I will submit my answer that I used and worked pretty well. I had a search box that filtered and array of objects and on my search box I used the (ngModelChange)="onChange($event)"
我偶然发现了这个问题，我将提交我使用过并且效果很好的答案。我有一个搜索框可以过滤对象数组，在我的搜索框中我使用了(ngModelChange)="onChange($event)"
in my .html
在我的 .html
<input type="text" [(ngModel)]="searchText" (ngModelChange)="reSearch(newValue)" placeholder="Search">
then in my component.ts
然后在我的 component.ts
reSearch(newValue: string) {
//this.searchText would equal the new value
//handle my filtering with the new value
}
