Estou tentando detectar uma alteração ngModel
em uma <select>
tag. No Angular 1.x, podemos resolver isso com um $watch
ligado ngModel
ou usando ngChange
, mas ainda não entendi como detectar uma mudança ngModel
no Angular 2.
Exemplo 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, se selecionarmos um valor diferente na lista suspensa, nossas ngModel
alterações e a expressão interpolada na visualização refletirão isso.
Como posso ser notificado sobre essa mudança em minha classe / controlador?
javascript
angular
Luxo
fonte
fonte
Respostas:
Atualização :
Separe as associações de evento e propriedade:
Você também pode usar
e você não teria que atualizar o modelo no manipulador de eventos, mas acredito que isso faz com que dois eventos sejam disparados, então provavelmente é menos eficiente.
Resposta antiga, antes de consertar um bug na versão beta.1:
Crie uma variável de modelo local e anexe um
(change)
evento:plunker
Veja também Como posso obter uma nova seleção em "selecionar" no Angular 2?
fonte
ngModel
se estou apenas vinculando uma nova variável chamadaitem
? Não é o ponto dengModel
colocar entre parênteses para adquirir ouvintes de evento, então por que estamos introduzindo uma nova variável?selectedItem
são os nossos dados vinculados, que o NgModel atualiza automaticamente para nós, mas ... ele não nos notifica sobre mudanças, o que geralmente é bom o suficiente (visualizações e outros serão atualizados), mas obviamente isso não é bom o suficiente para o seu caso de uso. Na outra pergunta do SO que mencionei, descrevo como tentei usar(ngModelChange)
para ser notificado sobre as mudanças, mas ele é chamado duas vezes para cada mudança. Não sei se isso é um bug ou não. De qualquer forma, adicionar uma(change)
associação de evento parece resolver o problema.selectedItem
não é atualizado quandoonChange()
dispara, portanto, parece que precisamos dessa variável de modelo local.#
ou#item
no nosso caso é uma referência local . Daí porque somos capazes de fazeritem.change
lá.ngModelChange
evento personalizado. O problema é que, com<select>
esse evento, é disparado duas vezes para cada alteração.Eu tropecei nesta pergunta e vou enviar minha resposta que usei e funcionei muito bem. Eu tinha uma caixa de pesquisa que filtrava uma série de objetos e na minha caixa de pesquisa usei o
(ngModelChange)="onChange($event)"
no meu
.html
então no meu
component.ts
fonte
ngModelChange
,$event
não é um evento DOM . Em vez disso, é o valor atual do elemento do formulário, que é uma string para um elemento de entrada.