Phát hiện thay đổi đối với ngModel trên một thẻ đã chọn (Angular 2)

Tôi đang cố gắng phát hiện sự thay đổi ngModeltrong <select>thẻ. Trong Angular 1.x, chúng tôi có thể giải quyết vấn đề này bằng $watchbật ngModelhoặc bằng cách sử dụng ngChange, nhưng tôi vẫn chưa hiểu cách phát hiện thay đổi đối với ngModelAngular 2.

Ví dụ đầy đủ : 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);
  }

}

Như chúng ta có thể thấy, nếu chúng ta chọn một giá trị khác từ menu thả xuống, các ngModelthay đổi của chúng ta và biểu thức nội suy trong chế độ xem sẽ phản ánh điều này.

Làm cách nào để nhận được thông báo về sự thay đổi này trong lớp học / bộ điều khiển của tôi?

Cập nhật :

Tách sự kiện và ràng buộc tài sản:

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

Bạn cũng có thể sử dụng

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

và sau đó bạn sẽ không phải cập nhật mô hình trong trình xử lý sự kiện, nhưng tôi tin rằng điều này gây ra hai sự kiện để kích hoạt, vì vậy nó có thể kém hiệu quả hơn.

Câu trả lời cũ, trước khi họ sửa một lỗi trong bản beta.1:

Tạo một biến mẫu cục bộ và đính kèm một (change)sự kiện:

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

plunker

Xem thêm Làm cách nào để có được lựa chọn mới trong "select" trong Angular 2?

Tôi đã tình cờ gặp câu hỏi này và tôi sẽ gửi câu trả lời mà tôi đã sử dụng và làm việc khá tốt. Tôi có một hộp tìm kiếm lọc và mảng các đối tượng và trên hộp tìm kiếm của mình, tôi đã sử dụng(ngModelChange)="onChange($event)"

trong tôi .html

<input type="text" [(ngModel)]="searchText" (ngModelChange)="reSearch(newValue)" placeholder="Search">

sau đó trong tôi component.ts

reSearch(newValue: string) {
    //this.searchText would equal the new value
    //handle my filtering with the new value
}