선택 태그에서 ngModel 변경 감지 (Angular 2)

선택 태그에서 ngModel 변경 감지 (Angular 2)

---

나는에 변화를 감지하려고 시도하고 ngModelA의 <select>태그입니다. 각도 1.x에서, 우리는 함께이 문제를 해결 수 $watch에 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변경 사항과 뷰의 보간 된 표현식이이를 반영합니다.

내 클래스 / 컨트롤러에서이 변경 사항에 대한 알림을 받으려면 어떻게해야합니까?

---

업데이트 :

이벤트 및 속성 바인딩을 분리합니다.

<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

참조 내가 각도 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
}

참고 URL : https://stackoverflow.com/questions/34405301/detect-change-to-ngmodel-on-a-select-tag-angular-2