각도 2의 드롭 다운 목록을 업데이트하여 ExpressionChangedAfterIsHasBeenCheckedError

Question

제목에 내가 ExpressionChangedAfterIsHasBeenCheckedError이 표시되고 this article을 읽은 후 불일치를 방지하기위한주의 사항이 있음을 이해했습니다. 그 단어들 말이야. 그래서 어느 시점에서 저는 단방향 흐름 (아마)을 위반하고있을 것입니다. 내가 가지고있는 항목 :

드롭 다운 상자.

<select id="product" [(ngModel)]="model.searchParameters.productId"> 
<option *ngFor="let product of products [value]="product.id">{{product.name}}</option> 
</select> 

checkIban을 트리거하는 입력 상자.

<div *ngIf="checkIban(productnumber, searchForm)"> 
    //show validation errors 
</div> 



checkIban(field: any, form: any): Boolean { 
    if(field.dirty) 
    { 
     if(field.viewModel.length === Productnumber.Iban) 
     { 
      this.model.searchParameters.productId = Product.Ibannumber; 
     } 
    } 
} 

나는 불행하게도 나를 위해, 충분히 잘하지 정말이 문제에 대한 적절한 솔루션을 적용하려면 ExpressionChangedAfterIsHasBeenCheckedError의 개념을 이해 생각하고 싶습니다.

사용 (예상치 못한 상태 (문서에서 작성한 것처럼)) setTimeout을 사용할 수 없습니다 (시도했습니다). 누군가 내가 잘못하고있는 것에 관해 어떤 조언을 해줄 수 있습니까?

Answer 1

:

대신 결과를 업데이트하고 구성 요소의 필드에 할당하고 대신 해당 필드에 바인딩 이벤트를 사용 .

이제 내 구성 요소가 다음과 같이 보입니다.

@Component{{ 
selector: 'search', 
templateUrl:'./app/search/search.component.html', 
changeDetection:ChangeDetectionStrategy.OnPush, 
providers:[SearchService] 
}) 

주제에 대한 많은 읽기 끝에이 솔루션을 발견했습니다. 그 트릭을 한 것으로 보인다.

Answer 2

보기에서 함수에 바인딩하는 것은 일반적으로 변경 감지가 실행될 때마다 함수가 호출되기 때문에 Angular에서는 좋지 않습니다. 두 번의 후속 호출 (단일 변경 감지 실행 중에)이 서로 다른 결과를 반환하면 질문에 오류 메시지가 나타납니다. 내 솔루션에 ChangeDetectionStrategy을 추가하기로 결정했다

<select id="product" [(ngModel)]="model.searchParameters.productId" 
    (ngModelChange)="checkIban()"> 
<option *ngFor="let product of products [value]="product.id">{{product.name}}</option> 
</select> 

<div *ngIf="isIbanOk"> 
    //show validation errors 
</div> 

checkIban(field: any, form: any): Boolean { 
    ... 

    this.isIbanOk = result; // true or false 
}