Detectar el cambio a ngModel en una etiqueta select (Angular 2)

Estoy intentando detectar un cambio en ngModel en una etiqueta <select>. En Angular 1.x, podríamos resolver esto con un $watch en ngModel, o usando ngChange, pero todavía tengo que entender cómo detectar un cambio a ngModel en Angular 2.

Ejemplo Completo: 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);
  }

}

Como podemos ver, si seleccionamos un valor diferente del menú desplegable, nuestro ngModel cambia, y la expresión interpolada en la vista refleja esto.

¿Cómo puedo recibir notificaciones de este cambio en mi clase/controlador?

Author: ruffin, 2015-12-22
Source

3 answers

Actualización :

Separe los enlaces de eventos y propiedades: 

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

También puedes usar 

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

Y entonces no tendría que actualizar el modelo en el controlador de eventos, pero creo que esto hace que dos eventos se disparen, por lo que probablemente sea menos eficiente.

Respuesta antigua, antes de que arreglaran un bug en beta.1:

Cree una variable de plantilla local y adjunte un evento (change): 

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

plunker

Véase también ¿Cómo puedo obtener una nueva selección en "select" en Angular 2?

 154
Author: Mark Rajcok,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:18:16

He tropezado con esta pregunta y presentaré mi respuesta que usé y trabajé bastante bien. Tenía un cuadro de búsqueda que filtraba y array de objetos y en mi cuadro de búsqueda utilicé el (ngModelChange)="onChange($event)"

En mi .html

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

Entonces en mi component.ts 

reSearch(newValue: string) {
    //this.searchText would equal the new value
    //handle my filtering with the new value
}
 7
Author: Logan H,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-02-19 00:47:26

Esto realmente no detecta el cambio de modelo, detecta cualquier evento de cambio en el campo de entrada. Por ejemplo, si el campo de entrada tiene un valor "my_search_word", y lo cambia a "my_search_word_2", luego cambia a "my_search_word", el valor del modelo realmente no cambia en este caso, pero reSearch($event) todavía piensa que hay un cambio.

 -4
Author: greengalaxy2016,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-09-28 08:41:11