ExpressionChangedAfterItHasBeenCheckedError Explained

이 오류가 계속 발생하는 이유를 설명해주세요. ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked.

분명히, 나는 dev 모드에서만 얻습니다. 제작 빌드에서는 발생하지 않지만 매우 성가 시며 prod에 표시되지 않는 dev 환경에서 오류가 발생하는 이점을 이해하지 못합니다. 아마도 내 이해 부족 때문일 것입니다.

일반적으로 수정은 충분히 쉽습니다. 다음과 같이 setTimeout에서 코드를 발생시키는 오류를 래핑합니다.

setTimeout(()=> {
    this.isLoading = true;
}, 0);

또는 다음과 같은 생성자를 사용하여 변경 사항을 강제 감지합니다. constructor(private cd: ChangeDetectorRef) {}:

this.isLoading = true;
this.cd.detectChanges();

그러나 왜이 오류가 계속 발생합니까? 앞으로 해킹 문제를 피할 수 있도록 이해하고 싶습니다.

나는 비슷한 문제가 있었다. 라이프 사이클 후크 설명서를 살펴보면로 변경 ngAfterViewInit되어 ngAfterContentInit작동했습니다.

이 오류는 응용 프로그램의 실제 문제를 나타내므로 예외를 throw하는 것이 좋습니다.

에서 devMode변경 감지 모델이 변경되었는지 확인하기 위해 모든 정기 변경 감지 실행 한 후 추가로 턴을 추가합니다.

정규 및 추가 변경 감지 회전간에 모델이 변경되면 다음 중 하나를 나타냅니다.

• 변경 감지 자체로 변경이 발생했습니다
• 메소드 또는 getter는 호출 될 때마다 다른 값을 리턴합니다.

모델이 결코 안정화되지 않을 수 있으므로 진행 방법이 명확하지 않기 때문에 둘 다 나쁩니다.

모델이 안정화 될 때까지 각도 런 변경 감지가 실행되면 영원히 실행될 수 있습니다. 각도가 변경 감지를 실행하지 않으면 뷰가 모델의 현재 상태를 반영하지 않을 수 있습니다.

Angular2의 프로덕션 모드와 개발 모드의 차이점은 무엇입니까?를 참조하십시오 .

Angular Lifecycle Hooks 와 변경 감지와의 관계를 이해 하면 많은 이해가 이루어졌습니다 .

Angular가 *ngIf요소에 바인딩 된 전역 플래그를 업데이트 하려고 시도하고 ngOnInit()다른 구성 요소 의 수명주기 후크 내에서 해당 플래그를 변경하려고했습니다 .

문서에 따르면 Angular가 이미 변경 사항을 감지 한 후에이 메소드가 호출됩니다.

첫 번째 ngOnChanges () 후에 한 번 호출됩니다.

따라서 내부 플래그를 업데이트 ngOnChanges()해도 변경 감지가 시작되지 않습니다. 그런 다음 변경 감지가 자연스럽게 다시 트리거되면 플래그 값이 변경되고 오류가 발생합니다.

제 경우에는 이것을 변경했습니다.

constructor(private globalEventsService: GlobalEventsService) {

}

ngOnInit() {
    this.globalEventsService.showCheckoutHeader = true;
}

이에:

constructor(private globalEventsService: GlobalEventsService) {
    this.globalEventsService.showCheckoutHeader = true;
}

ngOnInit() {

}

그리고 문제를 해결했습니다 :)

최신 정보

내가보기 엔부터 시작하는 것이 좋습니다 영업의 자동 응답 첫째 : 제대로에서 무엇을 할 수 있는지에 대해 생각 constructor에서 수행되어야 하는지를 대 ngOnChanges().

기발한

이것은 답변보다 더 많은 참고 사항이지만 누군가에게 도움이 될 수 있습니다. 버튼의 존재를 양식의 상태에 따라 만들려고 할 때이 문제가 발생했습니다.

<button *ngIf="form.pristine">Yo</button>

내가 아는 한이 구문은 조건에 따라 DOM에서 버튼을 추가하고 제거합니다. 차례로로 이어집니다 ExpressionChangedAfterItHasBeenCheckedError.

내 경우의 수정 (차이의 전체 의미를 파악한다고 주장하지는 않지만) display: none대신 다음 을 사용하는 것이 었습니다 .

<button [style.display]="form.pristine ? 'inline' : 'none'">Yo</button>

흥미로운 답변이 있었지만 내 요구에 맞는 것을 찾지 못하는 것 같습니다. @ chittrang-mishra에서 가장 가까운 것은 내 앱에서와 같이 하나의 특정 기능 만 나타내며 여러 개의 토글이 아닙니다.

나는 DOM의 일부가 아닌 [hidden]이점 을 이용 하기를 원하지 않았기 *ngIf때문에 오류를 수정하는 대신 오류를 억제하므로 최선의 방법이 아닌 다음 해결책을 찾았지만 내 경우에는 최종 결과가 정확합니다. 응용 프로그램에 문제가없는 것 같습니다.

내가 한 일은 구현 AfterViewChecked하고 추가 constructor(private changeDetector : ChangeDetectorRef ) {}한 다음

ngAfterViewChecked(){
  this.changeDetector.detectChanges();
}

다른 많은 사람들이 저를 도와 준 것처럼 이것이 도움이되기를 바랍니다.

Angular는 변경 감지를 실행하고 하위 구성 요소에 전달 된 일부 값이 변경된 것을 발견하면 오류가 발생합니다.

ExpressionChangedAfterItHasBeenCheckedError 더 클릭

이를 수정하기 위해 AfterContentChecked수명주기 후크를 사용할 수 있습니다.

import { ChangeDetectorRef, AfterContentChecked} from '@angular/core';

  constructor(
  private cdref: ChangeDetectorRef) { }

  ngAfterContentChecked() {

    this.cdref.detectChanges();

  }

필자의 경우 테스트를 실행하는 동안 사양 파일에서이 문제가 발생했습니다.

나는로 변경 ngIf 했다 [hidden]

<app-loading *ngIf="isLoading"></app-loading>

에

<app-loading [hidden]="!isLoading"></app-loading>

아래 단계를 수행하십시오.

1. 다음과 같이 @ angular / core에서 'ChangeDetectorRef'를 가져 와서 사용하십시오.

import{ ChangeDetectorRef } from '@angular/core';

2. 다음과 같이 constructor ()에서 구현하십시오.

constructor(   private cdRef : ChangeDetectorRef  ) {}

3. 버튼 클릭과 같은 이벤트에서 호출하는 함수에 다음 방법을 추가하십시오. 따라서 다음과 같이 보입니다.

functionName() {   
    yourCode;  
    //add this line to get rid of the error  
    this.cdRef.detectChanges();     
}

나는 ng2-carouselamos (Angular 8 & Bootstrap 4)를 사용하고있었습니다.

아래에서 내 문제가 해결되었습니다.

제가 한:

1. implement AfterViewChecked,  
2. add constructor(private changeDetector : ChangeDetectorRef ) {} and then 
3. ngAfterViewChecked(){ this.changeDetector.detectChanges(); }

구성 요소의 배열 중 하나에서 값이 변경되는 것과 동일한 문제에 직면했습니다. 그러나 값 변경에 대한 변경을 감지하는 대신 구성 요소 변경 감지 전략을 onPush(값 변경이 아닌 개체 변경에 대한 변경을 감지)로 변경했습니다.

import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';

@Component({
    changeDetection: ChangeDetectionStrategy.OnPush
    selector: -
    ......
})

기사 https://blog.angularindepth.com/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4를 참조 하십시오

따라서 변경 감지의 메커니즘은 실제로 변경 감지 및 검증 다이제스트가 동 기적으로 수행되는 방식으로 작동합니다. 즉, 속성을 비동기식으로 업데이트하면 확인 루프가 실행될 때 값이 업데이트되지 않고 ExpressionChanged...오류가 발생 하지 않습니다 . 이 오류가 발생하는 이유는 확인 프로세스 중에 Angular가 변경 감지 단계에서 기록한 값과 다른 값을 확인하기 때문입니다. 그래서 그것을 피하려면 ....

1) changeDetectorRef 사용

2) setTimeOut을 사용하십시오. 이것은 다른 VM에서 코드 작업을 매크로 작업으로 실행합니다. Angular는 확인 프로세스 중에 이러한 변경 사항을 볼 수 없으며 해당 오류가 발생하지 않습니다.

 setTimeout(() => {
        this.isLoading = true;
    });

3) 동일한 VM에서 코드를 실제로 실행하려면 다음과 같이 사용하십시오.

Promise.resolve(null).then(() => this.isLoading = true);

이것은 작은 작업을 만듭니다. 마이크로 태스크 대기열은 현재 동기 코드 실행이 완료된 후에 처리되므로 확인 단계 후에 속성 업데이트가 수행됩니다.

@HostBinding 이 오류의 혼란스러운 원인이 될 수 있습니다.

예를 들어 구성 요소에 다음 호스트 바인딩이 있다고 가정 해 봅시다.

// image-carousel.component.ts
@HostBinding('style.background') 
style_groupBG: string;

간단히하기 위해이 속성이 다음 입력 속성을 통해 업데이트되었다고 가정하겠습니다.

@Input('carouselConfig')
public set carouselConfig(carouselConfig: string) 
{
    this.style_groupBG = carouselConfig.bgColor;   
}

부모 구성 요소에서 프로그래밍 방식으로 설정합니다. ngAfterViewInit

@ViewChild(ImageCarousel) carousel: ImageCarousel;

ngAfterViewInit()
{
    this.carousel.carouselConfig = { bgColor: 'red' };
}

다음과 같은 일이 발생합니다.

• 부모 구성 요소가 생성됩니다
• ImageCarousel 구성 요소가 작성되어 carousel(ViewChild를 통해)에 지정됩니다.
• 우리는 carousel때까지 액세스 할 수 없습니다 ngAfterViewInit()(널이 될 것입니다)
• 우리는 구성을 할당합니다. style_groupBG = 'red'
• 차례로 background: red호스트 ImageCarousel 구성 요소에 설정 됩니다.
• 이 구성 요소는 부모 구성 요소가 '소유'하므로 변경 사항을 확인할 때 변경 사항을 발견하고 carousel.style.background이것이 문제가 아님을 알기에는 영리하지 않으므로 예외가 발생합니다.

한 가지 해결책은 ImageCarousel에 다른 래퍼 div를 도입하고 그에 배경색을 설정하는 것입니다. 그러나 HostBinding부모가 객체의 전체 경계를 제어하도록 허용하는 등 의 이점을 얻을 수는 없습니다 .

상위 구성 요소에서 더 나은 솔루션은 구성을 설정 한 후 detectChanges ()를 추가하는 것입니다.

ngAfterViewInit()
{
    this.carousel.carouselConfig = { ... };
    this.cdr.detectChanges();
}

이것은 이와 같이 명백하게 보일 수 있으며 다른 답변과 매우 유사하지만 미묘한 차이가 있습니다.

@HostBinding나중에 개발 중에 추가하지 않는 경우를 고려하십시오 . 갑자기이 오류가 발생하고 의미가없는 것 같습니다.

무슨 일이 일어나고 있는지에 대한 내 생각은 다음과 같습니다. 설명서를 읽지 못했지만 이것이 오류가 표시되는 이유의 일부라고 확신합니다.

*ngIf="isProcessing()" 

* ngIf를 사용하는 경우 조건이 변경 될 때마다 요소를 추가하거나 제거하여 DOM을 물리적으로 변경합니다. 따라서 조건이 뷰에 렌더링되기 전에 조건이 변경되면 (앵귤러 세계에서 가능할 수 있음) 오류가 발생합니다. 설명을 참조하십시오 여기에 개발 및 생산 모드 사이.

[hidden]="isProcessing()"

[hidden]그것을 사용할 때 물리적으로 변경되지 않고 DOM단지 element뷰에서 숨겨져 CSS있습니다. 요소는 여전히 DOM에 있지만 조건 값에 따라 표시되지 않습니다. 따라서 사용할 때 오류가 발생하지 않습니다 [hidden].

내 문제를 들어, 내가 읽고 있던 github의를 "afterViewInit의 구성 요소 '비 모델'값을 변경할 때 ExpressionChangedAfterItHasBeenCheckedError을"및 ngModel을 추가하기로 결정 -

<input type="hidden" ngModel #clientName />

문제가 해결되어 누군가에게 도움이되기를 바랍니다.

디버깅 팁

이 오류는 매우 혼란 스러울 수 있으며 정확히 언제 발생하는지에 대한 잘못된 가정을 쉽게 만들 수 있습니다. 영향을받는 구성 요소 전체에 적절한 디버깅 위치에 이와 같은 많은 디버깅 문을 추가하는 것이 도움이됩니다. 이것은 흐름을 이해하는 데 도움이됩니다.

부모에서 다음과 같은 문장을 넣으십시오 (정확한 문자열 'EXPRESSIONCHANGED'가 중요합니다).

    console.log('EXPRESSIONCHANGED - HomePageComponent: constructor');
    console.log('EXPRESSIONCHANGED - HomePageComponent: setting config', newConfig);
    console.log('EXPRESSIONCHANGED - HomePageComponent: setting config ok');
    console.log('EXPRESSIONCHANGED - HomePageComponent: running detectchanges');

자식 / 서비스 / 타이머 콜백에서 :

    console.log('EXPRESSIONCHANGED - ChildComponent: setting config');
    console.log('EXPRESSIONCHANGED - ChildComponent: setting config ok');

detectChanges수동으로 실행 하면 로깅도 추가하십시오.

    console.log('EXPRESSIONCHANGED - ChildComponent: running detectchanges');
    this.cdr.detectChanges();

그런 다음 Chrome 디버거에서 'EXPRESSIONCHANGES'로 필터링하십시오. 이것은 설정되는 모든 것의 흐름과 순서를 정확하게 보여줄 것이며 Angular가 오류를 발생시키는 지점에서도 정확하게 나타납니다.

회색 링크를 클릭하여 중단 점을 넣을 수도 있습니다.

응용 프로그램 전체에서 이름이 비슷한 속성 (예 style.background:)이 있는지주의해야 할 또 다른 사항 은 색상 값을 불명확하게 설정하여 생각하는 속성을 디버깅하고 있는지 확인하십시오.

제 경우 LoadingService에는 BehavioralSubject와 함께 비동기 속성이 있습니다.isLoading

[숨겨진] 모델 사용이 작동하지만 * ngIf 가 실패합니다

    <h1 [hidden]="!(loaderService.isLoading | async)">
        THIS WORKS FINE
        (Loading Data)
    </h1>

    <h1 *ngIf="!(loaderService.isLoading | async)">
        THIS THROWS ERROR
        (Loading Data)
    </h1>

rxjs를 사용하여 나를 위해 일한 솔루션

import { startWith, tap, delay } from 'rxjs/operators';

// Data field used to populate on the html
dataSource: any;

....

ngAfterViewInit() {
  this.yourAsyncData.
      .pipe(
          startWith(null),
          delay(0),
          tap((res) => this.dataSource = res)
      ).subscribe();
}

Ionic3 (기술 스택의 일부로 Angular 4를 사용함)에서 이런 종류의 오류가 발생했습니다.

나를 위해 이것을하고 있었다 :

<ion-icon [name]="getFavIconName()"></ion-icon>

그래서 화면이 작동하는 모드마다 이온 아이콘 유형을 조건부 에서 a에서 a pin로 변경하려고 remove-circle했습니다.

*ngIf대신 추가해야한다고 생각 합니다.

추가했을 때 내 문제가 나타 *ngIf났지만 그 원인이 아닙니다. {{}}태그 에서 모델을 변경 한 *ngIf후 나중에 명령문 에서 변경된 모델을 표시하려고하면 오류가 발생했습니다 . 예를 들면 다음과 같습니다.

<div>{{changeMyModelValue()}}</div> <!--don't do this!  or you could get error: ExpressionChangedAfterItHasBeenCheckedError-->
....
<div *ngIf="true">{{myModel.value}}</div>

문제를 해결하기 위해 전화 한 곳을 변경했습니다. changeMyModelValue() 더 이해하기 쉬운 곳으로 하는 곳을 .

내 상황 changeMyModelValue()에서 자식 구성 요소가 데이터를 변경할 때마다 호출 하고 싶었 습니다. 이것은 내가 만들고 부모가 호출하여 (그것을 처리 할 수 있도록 하위 구성 요소의 이벤트를 방출 필요합니다 changeMyModelValue(). 참조 https://angular.io/guide/component-interaction#parent-listens-for-child-event

나는 이것이 누군가가 여기에 오는 데 도움이되기를 바랍니다 : 우리 ngOnInit는 다음과 같은 방식으로 서비스를 호출 하고 변수 displayMain를 사용 하여 요소를 DOM에 마운트하는 것을 제어합니다.

component.ts

  displayMain: boolean;
  ngOnInit() {
    this.displayMain = false;
    // Service Calls go here
    // Service Call 1
    // Service Call 2
    // ...
    this.displayMain = true;
  }

및 component.html

<div *ngIf="displayMain"> <!-- This is the Root Element -->
 <!-- All the HTML Goes here -->
</div>

component.ts에 선언되지 않은 component.html의 변수를 사용했기 때문에이 오류가 발생했습니다. HTML에서 부분을 제거하면이 오류가 사라졌습니다.

나는 모달에서 redux 액션을 발송하고 그 당시 모달이 열리지 않았기 때문에이 오류가 발생했습니다. 모달 컴포넌트가 입력을받는 순간에 액션을 전달했습니다. 그래서 모달이 열리고 액션이 패치되도록 setTimeout을 거기에 넣습니다.

이 문제로 고군분투하는 사람에게. 이 오류를 올바르게 디버깅하는 방법은 다음과 같습니다. https://blog.angular-university.io/angular-debugging/

내 경우에는 실제로 * ngIf 대신이 [숨겨진] 핵을 사용 하여이 오류를 제거했습니다 ...

그러나 내가 제공 한 링크를 통해 GUILTY * ngIf :) 를 찾을 수 있었습니다.

즐겨.

솔루션 ... services 및 rxjs ... event emitter와 property binding은 모두 rxjs를 사용합니다. 자체 구현, 제어력 향상, 디버그 용이 이벤트 이미 터가 rxjs를 사용하고 있음을 기억하십시오. 간단히, 서비스를 생성하고 관찰 가능 요소 내에 각 구성 요소가 관찰자를 구독하고 필요에 따라 새로운 값 또는 가치를 전달하도록합니다.