Próbuję wykryć zmianę ngModel
w <select>
tagu. W Angular 1.x możemy rozwiązać ten problem za pomocą opcji $watch
on ngModel
lub używając ngChange
, ale jeszcze nie rozumiem, jak wykryć zmianę ngModel
w Angular 2.
Pełny przykład : 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);
}
}
Jak widać, jeśli wybierzemy inną wartość z listy rozwijanej, nasze ngModel
zmiany i interpolowane wyrażenie w widoku odzwierciedlają to.
Jak mogę otrzymać powiadomienie o tej zmianie w mojej klasie / kontrolerze?
javascript
angular
luks
źródło
źródło
Odpowiedzi:
Aktualizacja :
Oddziel powiązania zdarzenia i właściwości:
Możesz również użyć
i wtedy nie musiałbyś aktualizować modelu w module obsługi zdarzeń, ale uważam, że powoduje to uruchomienie dwóch zdarzeń, więc prawdopodobnie jest mniej wydajne.
Stara odpowiedź, zanim naprawili błąd w wersji beta.1:
Utwórz zmienną szablonu lokalnego i dołącz
(change)
wydarzenie:plunker
Zobacz także Jak mogę uzyskać nowy wybór w opcji „wybierz” w Angular 2?
źródło
ngModel
jeśli po prostu wiążę nową zmienną o nazwieitem
? Czy nie chodzi o zawijaniengModel
nawiasów w celu pozyskania detektorów zdarzeń, więc dlaczego wprowadzamy nową zmienną?selectedItem
to nasze powiązane dane, które NgModel aktualizuje automatycznie dla nas, ale ... nie powiadamia nas o zmianach, co często jest wystarczająco dobre (widoki i takie będą aktualizowane), ale oczywiście nie jest to wystarczające dla twojego przypadku użycia. W drugim pytaniu SO, do którego się odwołałem, opisuję, w jaki sposób próbowałem użyć(ngModelChange)
powiadomienia o zmianach, ale jest ono wywoływane dwukrotnie przy każdej zmianie. Nie wiem, czy to błąd, czy nie. W każdym razie dodanie(change)
powiązania zdarzenia wydaje się rozwiązać problem.selectedItem
nie jest aktualizowany podczasonChange()
pożaru, dlatego wydaje się, że potrzebujemy tej zmiennej lokalnego szablonu.#
lub#item
w naszym przypadku jest odniesieniem lokalnym . Dlatego możemy to zrobićitem.change
.ngModelChange
zdarzenia niestandardowego. Problem polega na<select>
tym, że to zdarzenie jest uruchamiane dwukrotnie przy każdej zmianie.Natknąłem się na to pytanie i podam odpowiedź, której użyłem i zadziałałem całkiem nieźle. Miałem pole wyszukiwania, które filtrowało i tworzyło tablice obiektów, aw moim polu wyszukiwania użyłem rozszerzenia
(ngModelChange)="onChange($event)"
w moim
.html
następnie w moim
component.ts
źródło
ngModelChange
,$event
nie jest zdarzeniem DOM . Jest to raczej bieżąca wartość elementu formularza, który jest łańcuchem znaków dla elementu wejściowego.