Обнаружить изменение в ngModel на выбранном теге (Angular 2)

Я пытаюсь обнаружить изменение на ngModel в теге <select>. В Angular 1.x мы можем решить это с помощью $watch на ngModel или с помощью ngChange, но я еще не понял, как обнаружить изменение ngModel в Angular 2.

Пример: http://plnkr.co/edit/9c9oKH1tjDDb67zdKmr9?p=info

Как мы видим, если мы выберем другое значение из раскрывающегося списка, наш ngModel изменится, и интерполированное выражение в представлении отражает это.

Как мне получить уведомление об этом изменении в моем классе/контроллере?

Ответ 1

Обновление

Отделить привязки событий и свойств:

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

Вы также можете использовать

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

а затем вам не нужно будет обновлять модель в обработчике событий, но я считаю, что это приводит к двум событиям, поэтому это, вероятно, менее эффективно.

Старый ответ, прежде чем они исправили ошибку в beta.1:

Создайте локальную переменную шаблона и прикрепите событие (change):

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

plunker

См. также Как получить новый выбор в "select" в Angular 2?

Ответ 2

Я наткнулся на этот вопрос, и я отправлю свой ответ, который использовал и работал очень хорошо. У меня было окно поиска, которое фильтровало и массивы объектов, а в окне поиска я использовал (ngModelChange)="onChange($event)"

в моем .html

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

то в моем component.ts

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

Ответ 3

это действительно не влияет на изменение модели, оно обнаруживает любое событие изменения в поле ввода. Например, если поле ввода имеет значение "my_search_word" и вы меняете его на "my_search_word_2", а затем вернитесь к "my_search_word", значение модели в этом случае не изменится, но reSearch($event) все еще считает, что есть изменение.