Rileva modifiche a ngModel su un tag select (Angular 2)

Question

Sto tentando di rilevare una modifica su ngModel in un tag <select>. In 1.x angolare, potremmo risolvere questo problema con un $watch su ngModel, oppure utilizzando ngChange, ma devo ancora capire come rilevare una modifica ngModel in angolare 2.

Esempio: http://plnkr.co/edit/9c9oKH1tjDDb67zdKmr9?p=info

Come possiamo vedere, se selezioniamo un valore diverso dal menu a discesa, le nostre variazioni ngModel e l'espressione interpolata nella vista lo riflettono.

Come si ottiene la notifica di questo cambiamento nella mia classe/controller?

Answer 1

Aggiornamento:

Separare i binding di eventi e proprietà:

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

Si potrebbe anche usare

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

e quindi non avrebbe dovuto aggiorna il modello in il gestore dell'evento, ma credo che questo faccia scattare due eventi, quindi è probabilmente meno efficiente.

---

Vecchio risposta, prima che Corretto un bug nella beta.1:

creare una variabile modello locale e allegare un evento (change):

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

plunker

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

Answer 2

Mi sono imbattuto in questa domanda e presenterò la mia risposta che ho usato e lavorato abbastanza bene. Ho avuto una casella di ricerca che filtrava e array di oggetti e sulla mia casella di ricerca ho usato il (ngModelChange)="onChange($event)"

nel mio .html

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

poi nella mia component.ts

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

Answer 3

questo in realtà non rileva il modello cambia, rileva qualsiasi evento di cambiamento nel campo di input. Ad esempio, se il campo di input ha un valore "my_search_word" e lo cambi in "my_search_word_2", quindi torna a "my_search_word", il valore del modello in questo caso non cambia in realtà, ma reSearch($event) pensa ancora che ci sia un cambiamento .