Búsqueda de sitios web

javascript - ¿Cómo detecto cambios en 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 no he entendido 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 puedo recibir notificaciones de este cambio en mi clase/controlador?

Respuesta #1

Actualización:

Separe las vinculaciones 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 entonces no tendrías que actualizar el modelo en el manejador de eventos, pero creo que esto hace que se disparen dos eventos, así que probablemente sea menos eficiente.

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

Crea una variable de plantilla local y adjunta 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?

Respuesta #2

Me he topado con esta pregunta y voy a enviar mi respuesta que usé y funcionó bastante bien. Tenía un cuadro de búsqueda que filtraba un array 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">

entonces en mi component.ts

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

Artículos relacionados