javascript - formcontrol - Detectar cambios en ngModel en una etiqueta de selección(Angular 2)

date input angular 4

Question

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 en 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 me notifican este cambio en mi clase / controlador?

Answer 1

Me he topado con esta pregunta y presentaré la respuesta que utilicé y funcionó bastante bien. Tenía un cuadro de búsqueda que filtraba y una matriz de objetos y en mi cuadro de búsqueda usé el (ngModelChange)="onChange($event)"

en mi .html

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

luego en mi component.ts

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

Answer 2

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 podrías usar

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

y luego no tendría que actualizar el modelo en el controlador de eventos, pero creo que esto provoca que se activen dos eventos, por lo que probablemente sea menos eficiente.

Antigua respuesta, antes de que arreglaran un error en beta.1:

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

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

plunker

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