부품의 모델의 각도 2 지연된 업데이트

저는 Angular 2를 처음 사용하고 있으며 최근에 양방향 바인딩을 시도했습니다.부품의 모델의 각도 2 지연된 업데이트

template.html

<select [(ngModel)]="val" (change)="onChanged()"> 
    <option>1</option> 
    <option>2</option> 
    <option>1</option> 
</select>

component.ts 문제는 드롭 다운 변화에 선택된 값이 값에 출력된다

..//other code definitions here 
export class MyComponent{ 
    val: number = 1; //edited this 

    onChanged(){ 
    console.log(this.val); 
    } 
}

: 나는 다음과 같은 코드가 있습니다 콘솔은 여전히 이전 값입니다. 다시 다른 값을 선택해야만 업데이트되지만 인쇄 된 값은 이전에 선택한 값이었습니다. 그래서 그것은 하나의 선택에 의해 지연되는 것과 같습니다.

누구든지 도움을 드리겠습니다.

감사합니다.

출처

2016-10-27 Jed

val 값은 다음 Angular2 변경 감지주기에서만 업데이트됩니다.

<select [(ngModel)]="val" (change)="onChanged($event)">

MyComponent에서 : onChanged 방법의 최신 값을 사용하려면이 같은 $event 값 소비는 바인딩 양방향 사용하는 경우

onChanged(newVal){ 
    console.log(newVal); 
}

출처

2016-10-27 12:41:10

양방향 바인딩의 목적을 무효화하지 않습니까? 뷰에 바인딩 된 모델이있는 매개 변수를 사용하여 함수를 복잡하게 처리해야합니다. – Jed

IMO 그렇지 않습니다. 양방향 데이터 바인딩은 여전히 예약되어 있습니다 (부모 구성 요소의 값이 결국 업데이트 됨). 여기에 필요한 것은 또 다른 관심사입니다. 특정 이벤트에 대해 몇 가지 작업을 수행하는 방법입니다. 2 가지 다른 관심사를 1에 쌓아두면 가장 쉽게 두통을 앓을 수 있습니다. –

오케이. 고맙습니다. – Jed

이 - [(ngModel)]을 항상 (ngModelChange) 대신 (change)을 사용합니다 :

<select [(ngModel)]="val" (ngModelChange)="onChanged()"> 
    <option>1</option> 
    <option>2</option> 
    <option>1</option> 
</select>

여기에 working Plunker입니다.

출처

2016-10-27 12:44:12

네,하지만 ngModelChange를 사용하면 onChanged() 함수가 두 번 호출됩니다. – Jed

나는 내 게시물을 편집했습니다. 나는 val 선언에서 뭔가를 놓쳤습니다. – Jed

@Jed 모든 변경 사항에 대해 한 번 호출됩니다. 다시 제공 한 Plunker를 확인하십시오. –

부품의 모델의 각도 2 지연된 업데이트

답변

관련 문제