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

Question

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

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

Полный Пример: 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);

  }



}

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

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

533 3

javascript angular

3 ответов:

Comments

Ничего не найдено.

Mark Rajcok · Accepted Answer · 2017-05-23 15:18:16

обновление:

разделите привязки событий и свойств:
<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)">
и тогда вам не придется обновлять модель в обработчике событий, но я считаю, что это вызывает два события для запуска, так что это, вероятно, менее эффективно.

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

создать локальную переменную шаблона и прикрепите (change) событие:
<select [(ngModel)]="selectedItem" #item (change)="onChange(item.value)">
plunker

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

Logan H · Accepted Answer · 2017-02-19 02:47:26

я наткнулся на этот вопрос, и я представлю свой ответ, который я использовал и работал довольно хорошо. У меня было окно поиска, которое фильтровало и массив объектов, и в моем окне поиска я использовал (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
}

greengalaxy2016 · Accepted Answer · 2016-09-28 11:41:11

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