检测选择标记上的ngModel更改(Angular 2)

时间:2015-12-21 22:20:38

标签: javascript angular

我正在尝试检测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会发生更改,并且视图中的插值表达式会反映这一点。

如何在班级/控制员中收到有关此更改的通知?

2 个答案:

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

plunker

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

答案 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
}