web-dev-qa-db-fra.com

Détecter le changement de ngModel sur une balise select (Angular 2)

Je tente de détecter une modification sur ngModel dans une balise <select>. Dans Angular 1.x, nous pourrions résoudre ce problème avec un $watch sur ngModel ou en utilisant ngChange, mais je n'ai pas encore compris comment détecter un passez à ngModel dans Angular 2.

Exemple complet : 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);
  }

}

Comme nous pouvons le constater, si nous sélectionnons une valeur différente dans la liste déroulante, notre ngModel change et l'expression interpolée de la vue en tient compte.

Comment puis-je être averti de ce changement dans ma classe/mon contrôleur?

javascriptangular
78
lux

Mise à jour :

Séparez les liaisons d'événement et de propriété:

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

Vous pouvez aussi utiliser

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

et alors vous n'auriez pas à mettre à jour le modèle dans le gestionnaire d'événements, mais je pense que cela provoque le déclenchement de deux événements, il est donc probablement moins efficace.

Ancienne réponse, avant qu'ils ne corrigent un bogue dans beta.1:

Créez une variable de modèle local et associez un événement (change):

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

plunker

Voir aussi Comment puis-je obtenir une nouvelle sélection dans "select" dans Angular 2?

202
Mark Rajcok

Je suis tombé par hasard sur cette question et je vais soumettre ma réponse que j'ai utilisé et travaillé assez bien. J'avais un champ de recherche qui filtrait et un tableau d'objets et sur mon champ de recherche, j'ai utilisé le (ngModelChange)="onChange($event)"

dans mon .html

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

puis dans mon component.ts

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