Erkenne Änderung an ngModel an einem ausgewählten Tag (Angular 2)

Question

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

Beispiel zu erkennen: http://plnkr.co/edit/9c9oKH1tjDDb67zdKmr9?p=info

Wie wir sehen können, wenn wir einen anderen Wert aus dem Dropdown wählen, ändert sich unser ngModel, und der interpolierte Ausdruck in der Ansicht spiegelt dies wider.

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

Answer 1

aktualisieren:

Trennen Sie die Veranstaltung und Eigentum Bindungen:

<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 auch

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

und dann würden Sie nicht haben verwenden könnte Aktualisieren Sie das Modell in der Event-Handler, aber ich glaube, dass zwei Ereignisse auslösen, also ist es wahrscheinlich weniger effizient.

---

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

Erstellen Ihnen ein lokales Template-Variable und fügen Sie ein (change) Ereignis:

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

plunker

See auch How can I get new selection in "select" in Angular 2?

Answer 2

Ich bin über diese Frage gestolpert und ich werde meine Antwort einreichen, dass ich ziemlich gut verwendet und gearbeitet habe. Ich hatte ein Suchfeld, das Objekt gefiltert und Anordnung von und auf meinem Suchfeld verwenden ich die (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 
} 

Answer 3

das wirklich nicht erkennt Der Modellwechsel erkennt jedes Änderungsereignis im Eingabefeld. Wenn das Eingabefeld beispielsweise einen Wert "my_search_word" hat und Sie es in "my_search_word_2" ändern, dann zurück zu "my_search_word" ändert sich der Modellwert in diesem Fall nicht wirklich, aber reSearch($event) denkt immer noch, dass es eine Änderung gibt .