2016-06-16 4 views
1

나는이 같은 선택 필드가 선택입니다 : 구성 요소에때 Angular2에 모델에 반영 변화가

<div *ngFor="let filter of filters; let idx = index"> 
    <select [id]="'name' + idx" [(ngModel)]="filter.name" (change)="changeFilter(idx, $event)"> 
    <option val="a">A</option> 
    <option val="b">B</option> 
    </select> 
</div> 

change() 기능이 즉시 변화를 감지하지 않습니다. 간체 :

@Component() 
export class Filters { 

    public filters = [{name: "a"}, {name: "b"}, {name: "a"}]; 

    public change(idx: number, $event: Event) { 

    console.log(this.filters[idx].name === $event.target.name); // false here 
    setTimeout(() => { 

     console.log(this.filters[idx].name === $event.target.name); // Now it's true 

    }, 10); 
    } 
} 

지금, 나는이 옵션 사이를 변경하는 경우, 변경() 함수는 약간의 시간이 필요 - 보통 미만 3이 setTimeout에 밀리 초,하지만 때로는 더.

이제 이것이 이것이 변경 사항을 감지하는 가장 좋은 방법은 아니며 올바르게 수행하는 방법을 찾을 수 있지만 변경 사항이 언제 내 모델에 반영되었는지 확인하는 방법이 궁금합니다. ?

답변

2

ngModelngFor으로 생성 된 변수에 대한 바인딩을 지원하지 않습니다.

대신 사용

[(ngModel)]="filters[idx].name" 

또한 값이 변경 후 (change) 위해 이벤트와 이벤트 핸들러가 먼저 처리되는 것을 브라우저에 의존하면서

(ngModelChange)="changeFilter(idx, $event)" 

ngModelChange

아마 방출을 시도 할 수 (AFAIR ngModelinput을 사용합니다.

+1

'ngModelChange'가 작동합니다. 전자 전체 모델 (지금 필터는 최상위 모델조차도 아니며, 다른 객체의 소품입니다.) – Zlatko