ExpressionChangedAfterItHasBeenCheckedErrorの説明

このエラーが発生し続ける理由を教えてください。 ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked.

明らかに、私はそれを開発モードでのみ取得しますが、本番ビルドでは発生しませんが、それは非常に煩わしく、開発環境でエラーが発生してプロダクションに表示されないことの利点を理解できません- -おそらく私の理解不足のためです。

通常、修正は簡単で、エラーの原因となるコードを次のようにsetTimeoutでラップするだけです。

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

または、次のようなコンストラクタで強制的に変更を検出します。constructor(private cd: ChangeDetectorRef) {}：

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

しかし、なぜ私は常にこのエラーに遭遇するのですか？私はそれを理解したいので、将来これらのハックな修正を避けることができます。

同様の問題がありました。見てみると、ライフサイクルフックドキュメンテーション、私は変更ngAfterViewInitするngAfterContentInitと、それが働きました。

このエラーはアプリケーションの実際の問題を示しているため、例外をスローすることは理にかなっています。

でdevMode変化検出モデルが変更されたかどうかを確認するために、すべての定期的な変更検出の実行後に追加のターンを追加します。

通常の変更検出ターンと追加の変更検出ターンの間でモデルが変更された場合、これは、

• 変更検出自体が変更を引き起こした
• メソッドまたはゲッターは、呼び出されるたびに異なる値を返します

これはどちらも悪いことです。モデルが安定しない可能性があるため、処理方法が明確でないためです。

Angularがモデルが安定するまで変更検出を実行すると、永久に実行される可能性があります。Angularが変更検出を実行しない場合、ビューはモデルの現在の状態を反映していない可能性があります。

参照してくださいAngular2の生産と開発モードの違いは何ですか？

Angular Lifecycle Hooksと変更検出との関係を理解すると、多くの理解が得られました。

Angularに*ngIf要素のにバインドされたグローバルフラグを更新させようとしていてngOnInit()、別のコンポーネントのライフサイクルフック内でそのフラグを変更しようとしました。

ドキュメントによると、このメソッドはAngularがすでに変更を検出した後に呼び出されます：

最初のngOnChanges（）の後で1回呼び出されます。

したがって、内部のフラグを更新しても、ngOnChanges()変更の検出は開始されません。次に、変更検出が再び自然にトリガーされると、フラグの値が変更され、エラーがスローされます。

私の場合、私はこれを変更しました：

constructor(private globalEventsService: GlobalEventsService) {

}

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

これに：

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

ngOnInit() {

}

そしてそれは問題を修正しました:)

更新

最初にOPの自己応答から始めることを強くお勧めします。VSで実行できることとで実行するconstructor必要があることを適切に検討してくださいngOnChanges()。

元の

これは答えというよりは副次的なものですが、誰かを助けるかもしれません。ボタンの存在をフォームの状態に依存させようとしたときに、この問題に遭遇しました。

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

私の知る限り、この構文により、ボタンは条件に基づいてDOMに追加および削除されます。これは順番ににつながりExpressionChangedAfterItHasBeenCheckedErrorます。

私の場合の修正は（違いの完全な影響を把握しているとは言いませんが）、display: none代わりに使用することでした：

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

興味深い答えがありましたが、自分のニーズに一致するものを見つけられなかったようです。最も近いのは、1つの特定の機能のみを参照し、アプリのように複数のトグルを参照しない@ chittrang-mishraからのものです。

私はDOMの一部でもない[hidden]ことを利用するために使用したくなかった*ngIfので、次の解決策を見つけました。エラーを修正するのではなく抑制するので、すべてに最適ではない可能性がありますが、私の場合は最終結果は正しいですが、私のアプリでは問題ないようです。

私がしたことは、実装AfterViewCheckedして追加constructor(private changeDetector : ChangeDetectorRef ) {}してから

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

他の多くの人が私を助けてくれたので、これが他の人を助けることを願っています。

Angularは変更検出を実行し、子コンポーネントに渡されたいくつかの値が変更されたことが判明した場合、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(); }

コンポーネントの配列の1つで値が変化するのと同じ問題に直面していました。しかし、値の変化に対する変化を検出する代わりに、コンポーネントの変化検出戦略を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を介して）に割り当てられます
• （nullになります）carouselまでアクセスできませんngAfterViewInit()
• 設定を割り当てる、設定します style_groupBG = 'red'
• これbackground: redにより、ホストのImageCarouselコンポーネントが設定されます。
• このコンポーネントは親コンポーネントによって「所有」されているため、変更をチェックすると、変更が検出されcarousel.style.background、問題ではないことを認識するのに十分ではないため、例外がスローされます。

1つの解決策は、ImageCarouselに別のラッパーdivインサイダーを導入し、その上に背景色を設定することですが、使用するといくつかの利点が得られません HostBinding（親がオブジェクトの完全な境界を制御できるようにするなど）。

親コンポーネントでのより良い解決策は、設定を設定した後にdetectChanges（）を追加することです。

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

これは、このように設定された非常に明白なように見え、他の回答と非常に似ていますが、微妙な違いがあります。

@HostBinding開発中の後半まで追加しない場合を検討してください。突然あなたはこのエラーを受け取り、それは意味をなさないようです。

これが何が起こっているかについての私の考えです。私はドキュメントを読んでいませんが、これがエラーが表示される理由の一部であると確信しています。

*ngIf="isProcessing()" 

* ngIfを使用する場合、条件が変化するたびに要素を追加または削除することにより、DOMを物理的に変更します。したがって、ビューにレンダリングされる前に条件が変更されると（Angularの世界では非常に可能性があります）、エラーがスローされます。説明を参照してくださいここでは、開発と生産のモード間。

[hidden]="isProcessing()"

使用[hidden]する場合、物理的には変更されませんDOMが、単にelementビューから隠さCSSれます。おそらく、背面で使用されます。要素は引き続きDOMに存在しますが、条件の値によっては表示されません。そのため、を使用してもエラーは発生しません[hidden]。

私の問題のために、私は読んでいたgithubの「afterViewInit内のコンポーネント『非モデル』の値を変更するときにExpressionChangedAfterItHasBeenCheckedErrorを」とngModelを追加することにしました-

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

それは私の問題を修正しました、それが誰かを助けることを望みます。

デバッグのヒント

このエラーは非常に混乱する可能性があり、正確にいつ発生するかについて誤った仮定をするのは簡単です。影響を受けるコンポーネント全体の適切な場所に、このような多くのデバッグステートメントを追加すると便利です。これはフローの理解に役立ちます。

親のputステートメントは次のようになります（正確な文字列 '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）を使用している場合は、もう1つ注意が必要なのは、意図しないプロパティをデバッグしていることを確認するために、あいまいな色の値に設定することです。

私の場合、LoadingServiceBehaviouralSubject で非同期プロパティがありました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>

そのため、画面で操作しているモードごとに、イオンアイコンのタイプpinをa からに条件付きで変更しようとし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()、子コンポーネントがデータを変更するたびに呼び出されるようにしました。これには、親がそれを処理できるように、子コンポーネントでイベントを作成して発行する必要がありました（を呼び出すことによって。https：//angular.io/guide/component-interaction#parent-listens-for-child-eventをchangeMyModelValue()参照してください）

これが誰かがここに来るのに役立つことを願っています。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の代わりにこの[hidden]ハックを使用してこのエラーを取り除きました...

しかし、私が提供したリンクにより、私はTHE GUILTY * ngIf :) を見つけることができました。

楽しい。

ソリューション...サービスとrxjs ...イベントエミッターとプロパティバインディングはどちらもrxjsを使用します。自分で実装する方が優れており、より制御しやすく、デバッグが容易です。イベントエミッターはrxjsを使用していることに注意してください。単に、サービスを作成してオブザーバブル内で、各コンポーネントにオブザーバーをサブスクライブさせ、必要に応じて新しい値またはcosume値を渡します