Détecter le changement de ngModel sur une balise de sélection (Angular 2)

J'essaie de détecter un changement ngModeldans une <select>balise. Dans Angular 1.x, nous pourrions résoudre ce problème avec un $watchon ngModelou en utilisant ngChange, mais je n'ai pas encore compris comment détecter un changement ngModeldans Angular 2.

Exemple complet : 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);
  }

}

Comme nous pouvons le voir, si nous sélectionnons une valeur différente dans la liste déroulante, nos ngModelmodifications et l'expression interpolée dans la vue le reflètent.

Comment être informé de ce changement dans ma classe / mon contrôleur?

Mise à jour :

Séparez les liaisons d'événement et de propriété:

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

Vous pouvez également utiliser

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

et vous n'auriez pas à mettre à jour le modèle dans le gestionnaire d'événements, mais je crois que cela provoque le déclenchement de deux événements, donc c'est probablement moins efficace.

Ancienne réponse, avant de corriger un bogue dans la version bêta.1:

Créez une variable de modèle locale et attachez un (change)événement:

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

plunker

Voir aussi Comment puis-je obtenir une nouvelle sélection dans "sélectionner" dans Angular 2?

Je suis tombé sur cette question et je vais soumettre ma réponse que j'ai utilisée et travaillé assez bien. J'avais un champ de recherche qui filtrait et un tableau d'objets et sur mon champ de recherche, j'ai utilisé le(ngModelChange)="onChange($event)"

dans mon .html

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

puis dans mon component.ts

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