Erkennen Sie die Änderung von ngModel an einem ausgewählten Tag (Winkel 2).

Ich versuche, eine Änderung ngModelin einem <select>Tag zu erkennen. In Angular 1.x könnten lösen wir dies mit einem $watchauf ngModel, oder durch die Verwendung ngChange, aber ich habe noch zu verstehen , wie eine Änderung zu erfassen , ngModelin Angular 2.

Vollständiges Beispiel : 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);
  }

}

Wie wir sehen können, spiegeln unsere ngModelÄnderungen und der interpolierte Ausdruck in der Ansicht dies wider , wenn wir einen anderen Wert aus der Dropdown-Liste auswählen .

Wie werde ich über diese Änderung in meiner Klasse / meinem Controller informiert?

Update :

Trennen Sie die Ereignis- und Eigenschaftsbindungen:

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

Sie könnten auch verwenden

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

und dann müssten Sie das Modell im Ereignishandler nicht aktualisieren, aber ich glaube, dies führt dazu, dass zwei Ereignisse ausgelöst werden, sodass es wahrscheinlich weniger effizient ist.

Alte Antwort, bevor sie einen Fehler in Beta.1 behoben haben:

Erstellen Sie eine lokale Vorlagenvariable und fügen Sie ein (change)Ereignis hinzu:

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

plunker

Siehe auch Wie kann ich in "Auswählen" in Winkel 2 eine neue Auswahl erhalten?

Ich bin über diese Frage gestolpert und werde meine Antwort einreichen, die ich verwendet habe und die ziemlich gut funktioniert hat. Ich hatte ein Suchfeld, das gefiltert und eine Reihe von Objekten und in meinem Suchfeld habe ich das verwendet(ngModelChange)="onChange($event)"

in meinem .html

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

dann in meinem component.ts

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