ExpressionChangedAfterItHasBeenCheckedError erklärt

Bitte erklären Sie mir, warum ich diesen Fehler immer wieder bekomme: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked.

Natürlich bekomme ich es nur im Dev-Modus, es passiert nicht in meinem Produktions-Build, aber es ist sehr ärgerlich und ich verstehe einfach nicht die Vorteile eines Fehlers in meiner Dev-Umgebung, der nicht auf dem Produkt angezeigt wird - -wahrscheinlich wegen meines Unverständnisses.

Normalerweise ist das Update einfach genug. Ich packe den Fehler verursachenden Code einfach in ein setTimeout wie folgt:

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

Oder Kraft erfassen Änderungen mit einem Konstruktor wie folgt aus : constructor(private cd: ChangeDetectorRef) {}:

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

Aber warum stoße ich ständig auf diesen Fehler? Ich möchte es verstehen, damit ich diese hackigen Korrekturen in Zukunft vermeiden kann.

Ich hatte ein ähnliches Problem. Als ich mir die Dokumentation zu Lifecycle Hooks ansah , wechselte ich ngAfterViewInitzu ngAfterContentInitund es funktionierte.

Dieser Fehler weist auf ein echtes Problem in Ihrer Anwendung hin. Daher ist es sinnvoll, eine Ausnahme auszulösen.

Bei der devModeÄnderungserkennung wird nach jedem regulären Änderungserkennungslauf eine zusätzliche Drehung hinzugefügt, um zu überprüfen, ob sich das Modell geändert hat.

Wenn sich das Modell zwischen der regulären und der zusätzlichen Änderungserkennungsrunde geändert hat, bedeutet dies, dass entweder

• Die Änderungserkennung selbst hat eine Änderung verursacht
• Eine Methode oder ein Getter gibt bei jedem Aufruf einen anderen Wert zurück

die beide schlecht sind, weil es nicht klar ist, wie es weitergehen soll, weil sich das Modell möglicherweise nie stabilisiert.

Wenn Angular Runs die Änderungserkennung ausführen, bis sich das Modell stabilisiert hat, wird es möglicherweise für immer ausgeführt. Wenn Angular keine Änderungserkennung ausführt, spiegelt die Ansicht möglicherweise nicht den aktuellen Status des Modells wider.

Siehe auch Was ist der Unterschied zwischen Produktions- und Entwicklungsmodus in Angular2?

Als ich die Angular Lifecycle Hooks und ihre Beziehung zur Änderungserkennung verstand, kam viel Verständnis auf .

Ich habe versucht, Angular dazu zu bringen, ein globales Flag zu aktualisieren, das *ngIfan das eines Elements gebunden ist, und ich habe versucht, dieses Flag innerhalb des ngOnInit()Lebenszyklus-Hooks einer anderen Komponente zu ändern .

Laut Dokumentation wird diese Methode aufgerufen, nachdem Angular bereits Änderungen erkannt hat:

Einmal aufgerufen nach den ersten ngOnChanges ().

Das Aktualisieren des Flags innerhalb von ngOnChanges()wird also keine Änderungserkennung auslösen. Sobald die Änderungserkennung natürlich wieder ausgelöst wurde, hat sich der Wert des Flags geändert und der Fehler wird ausgelöst.

In meinem Fall habe ich Folgendes geändert:

constructor(private globalEventsService: GlobalEventsService) {

}

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

Dazu:

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

ngOnInit() {

}

und es hat das Problem behoben :)

Aktualisieren

Ich empfehle dringend, zuerst mit der Selbstantwort des OP zu beginnen : Überlegen Sie genau, was im constructorVergleich zu dem, was im OP getan werden soll, getan werden kann ngOnChanges().

Original

Dies ist eher eine Randnotiz als eine Antwort, aber es könnte jemandem helfen. Ich bin auf dieses Problem gestoßen, als ich versucht habe, das Vorhandensein einer Schaltfläche vom Status des Formulars abhängig zu machen:

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

Soweit ich weiß, führt diese Syntax dazu, dass die Schaltfläche basierend auf der Bedingung zum DOM hinzugefügt und daraus entfernt wird. Was wiederum zum führt ExpressionChangedAfterItHasBeenCheckedError.

Die Lösung in meinem Fall (obwohl ich nicht behaupte, die vollständigen Auswirkungen des Unterschieds zu erfassen) bestand darin, display: nonestattdessen Folgendes zu verwenden :

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

Es gab interessante Antworten, aber ich schien keine zu finden, die meinen Bedürfnissen entsprach. Die nächste stammt von @ chittrang-mishra, die sich nur auf eine bestimmte Funktion bezieht und nicht auf mehrere Schalter wie in meiner App.

Ich wollte nicht [hidden]ausnutzen, *ngIfnicht einmal Teil des DOM zu sein, also fand ich die folgende Lösung, die möglicherweise nicht für alle die beste ist, da sie den Fehler unterdrückt, anstatt ihn zu korrigieren, aber in meinem Fall, wo ich das kenne Das Endergebnis ist korrekt, es scheint für meine App in Ordnung zu sein.

Was ich getan habe, war implementieren AfterViewChecked, hinzufügen constructor(private changeDetector : ChangeDetectorRef ) {}und dann

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

Ich hoffe, das hilft anderen, da mir viele andere geholfen haben.

Angular-Läufe ändern die Erkennung und wenn festgestellt wird, dass einige Werte, die an die untergeordnete Komponente übergeben wurden, geändert wurden, löst Angular den Fehler aus:

ExpressionChangedAfterItHasBeenCheckedError Klicken Sie für mehr

Um dies zu korrigieren, können wir den AfterContentCheckedLife Cycle Hook und verwenden

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

  constructor(
  private cdref: ChangeDetectorRef) { }

  ngAfterContentChecked() {

    this.cdref.detectChanges();

  }

In meinem Fall hatte ich dieses Problem in meiner Spezifikationsdatei, während ich meine Tests ausführte.

Ich musste Änderung ngIf zu [hidden]

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

zu

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

Befolgen Sie die folgenden Schritte:

1. Verwenden Sie 'ChangeDetectorRef', indem Sie es wie folgt aus @ angle / core importieren:

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

2. Implementieren Sie es wie folgt in constructor ():

constructor(   private cdRef : ChangeDetectorRef  ) {}

3. Fügen Sie Ihrer Funktion die folgende Methode hinzu, die Sie bei einem Ereignis wie einem Klick auf die Schaltfläche aufrufen. So sieht es aus:

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

Ich habe ng2-Karussellamos (Angular 8 & Bootstrap 4) verwendet.

Unten wurde mein Problem behoben:

Was ich getan habe:

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

Ich hatte das gleiche Problem, als sich der Wert in einem der Arrays in meiner Komponente änderte. Aber anstatt die Änderungen bei Wertänderungen zu erkennen, habe ich die Strategie zur Erkennung von Komponentenänderungen in geändert onPush(wodurch Änderungen bei Objektänderungen und nicht bei Wertänderungen erkannt werden).

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

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

Beziehen Sie sich auf den Artikel https://blog.angularindepth.com/alles, was Sie brauchen, um zu wissen, dass der Ausdruck geändert wurde, nachdem Sie den Fehler- Fehler- e3fd9ce7dbb4 überprüft haben

Die Mechanik hinter der Änderungserkennung funktioniert also tatsächlich so, dass sowohl die Änderungserkennung als auch die Überprüfungsübersicht synchron ausgeführt werden. Das heißt, wenn wir Eigenschaften asynchron aktualisieren, werden die Werte nicht aktualisiert, wenn die Überprüfungsschleife ausgeführt wird, und es wird kein ExpressionChanged...Fehler angezeigt. Der Grund für diesen Fehler ist, dass Angular während des Überprüfungsprozesses andere Werte sieht als während der Änderungserkennungsphase. Um das zu vermeiden ...

1) Verwenden Sie changeDetectorRef

2) benutze setTimeOut. Dadurch wird Ihr Code in einer anderen VM als Makroaufgabe ausgeführt. Angular sieht diese Änderungen während des Überprüfungsprozesses nicht und Sie erhalten diesen Fehler nicht.

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

3) Wenn Sie Ihren Code wirklich auf derselben VM ausführen möchten, verwenden Sie wie

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

Dadurch wird eine Mikroaufgabe erstellt. Die Micro-Task-Warteschlange wird verarbeitet, nachdem der aktuelle Synchroncode ausgeführt wurde. Daher erfolgt die Aktualisierung der Eigenschaft nach dem Überprüfungsschritt.

@HostBinding kann eine verwirrende Quelle für diesen Fehler sein.

Angenommen, Sie haben die folgende Hostbindung in einer Komponente

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

Nehmen wir zur Vereinfachung an, diese Eigenschaft wird über die folgende Eingabeeigenschaft aktualisiert:

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

In der übergeordneten Komponente setzen Sie sie programmgesteuert ein ngAfterViewInit

@ViewChild(ImageCarousel) carousel: ImageCarousel;

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

Folgendes passiert:

• Ihre übergeordnete Komponente wird erstellt
• Die ImageCarousel-Komponente wird erstellt und zugewiesen carousel(über ViewChild).
• Wir können nicht zugreifen, carouselbis ngAfterViewInit()(es wird null sein)
• Wir weisen die Konfiguration zu, die setzt style_groupBG = 'red'
• Dies setzt wiederum background: reddie Host-ImageCarousel-Komponente ein
• Diese Komponente gehört Ihrer übergeordneten Komponente. Wenn sie also nach Änderungen sucht, findet sie eine Änderung carousel.style.backgroundund ist nicht klug genug, um zu wissen, dass dies kein Problem ist, sodass die Ausnahme ausgelöst wird .

Eine Lösung besteht darin, einen anderen Wrapper-Div-Insider ImageCarousel einzuführen und die Hintergrundfarbe darauf festzulegen. Dann erhalten Sie jedoch nicht die Vorteile der Verwendung HostBinding(z. B. die Möglichkeit für das übergeordnete Element, die vollen Grenzen des Objekts zu steuern).

Die bessere Lösung in der übergeordneten Komponente besteht darin, nach dem Festlegen der Konfiguration detectChanges () hinzuzufügen.

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

Dies mag so offensichtlich aussehen und anderen Antworten sehr ähnlich sein, aber es gibt einen subtilen Unterschied.

Betrachten Sie den Fall, in dem Sie @HostBindingerst später während der Entwicklung hinzufügen . Plötzlich erhalten Sie diesen Fehler und es scheint keinen Sinn zu ergeben.

Hier sind meine Gedanken darüber, was passiert. Ich habe die Dokumentation nicht gelesen, bin mir aber sicher, dass dies ein Grund dafür ist, warum der Fehler angezeigt wird.

*ngIf="isProcessing()" 

Bei Verwendung von * ngIf wird das DOM physisch geändert, indem das Element jedes Mal hinzugefügt oder entfernt wird, wenn sich die Bedingung ändert. Wenn sich die Bedingung ändert, bevor sie in die Ansicht gerendert wird (was in Angulars Welt sehr gut möglich ist), wird der Fehler ausgelöst. Siehe Erklärung hier zwischen Entwicklungs- und Produktionsmodus.

[hidden]="isProcessing()"

Bei der Verwendung [hidden]ändert sich das nicht physisch, DOMsondern es wird lediglich elementvor der Ansicht verborgen , höchstwahrscheinlich CSSim Hintergrund. Das Element befindet sich noch im DOM, ist jedoch je nach Wert der Bedingung nicht sichtbar. Aus diesem Grund tritt der Fehler bei der Verwendung nicht auf [hidden].

Für mein Problem las ich github - "ExpressionChangedAfterItHasBeenCheckedError beim Ändern eines Komponenten-Nicht-Modell-Werts in afterViewInit" und beschloss, das ngModel hinzuzufügen

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

Es hat mein Problem behoben, ich hoffe es hilft jemandem.

Debugging-Tipps

Dieser Fehler kann ziemlich verwirrend sein, und es ist leicht, eine falsche Annahme darüber zu treffen, wann genau er auftritt. Ich finde es hilfreich, viele Debugging-Anweisungen wie diese in den betroffenen Komponenten an den entsprechenden Stellen hinzuzufügen. Dies hilft, den Fluss zu verstehen.

In den übergeordneten put-Anweisungen wie diesen (die genaue Zeichenfolge 'EXPRESSIONCHANGED' ist wichtig), aber ansonsten sind dies nur Beispiele:

    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');

In den Rückrufen für Kinder / Dienste / Timer:

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

Wenn Sie detectChangesmanuell ausführen, fügen Sie auch dafür die Protokollierung hinzu:

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

Dann filtern Sie im Chrome-Debugger einfach nach 'EXPRESSIONCHANGES'. Dies zeigt Ihnen genau den Ablauf und die Reihenfolge von allem, was eingestellt wird, und auch genau, an welchem ​​Punkt Angular den Fehler auslöst.

Sie können auch auf die grauen Links klicken, um Haltepunkte einzufügen.

Eine andere Sache, die Sie beachten sollten, wenn Sie in Ihrer gesamten Anwendung ähnlich benannte Eigenschaften haben (z. B. style.background), stellen Sie sicher, dass Sie diejenige debuggen, von der Sie glauben, dass Sie sie haben - indem Sie sie auf einen unklaren Farbwert setzen.

In meinem Fall hatte ich eine asynchrone Eigenschaft LoadingServicemit einem BehavioralSubjectisLoading

Die Verwendung des [versteckten] Modells funktioniert, aber * ngIf schlägt fehl

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

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

Eine Lösung, die bei mir mit rxjs funktioniert hat

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();
}

Ich hatte diese Art von Fehler in Ionic3 (das Angular 4 als Teil seines Technologie-Stacks verwendet).

Für mich war es das:

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

Also habe ich versucht, den Typ eines Ionensymbols bedingt von a pinauf a zu ändern remove-circle, je nachdem, in welchem ​​Modus ein Bildschirm arbeitet.

Ich schätze, ich muss *ngIfstattdessen eine hinzufügen .

Mein Problem war offensichtlich, als ich hinzufügte, *ngIfaber das war nicht die Ursache. Der Fehler wurde verursacht, indem das Modell in {{}}Tags geändert wurde und *ngIfspäter versucht wurde, das geänderte Modell in der Anweisung anzuzeigen . Hier ist ein Beispiel:

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

Um das Problem zu beheben, habe ich mich changeMyModelValue()an einen Ort gewandt, der sinnvoller war.

In meiner Situation wollte ich changeMyModelValue()immer dann aufgerufen werden, wenn eine untergeordnete Komponente die Daten änderte. Dazu musste ich ein Ereignis in der untergeordneten Komponente erstellen und ausgeben, damit das übergeordnete Element damit umgehen kann (durch Aufrufen changeMyModelValue(). Siehe https://angular.io/guide/component-interaction#parent-listens-for-child-event

Ich hoffe, dies hilft jemandem, der hierher kommt: Wir führen Serviceabrufe auf ngOnInitfolgende Weise durch und verwenden eine Variable displayMain, um die Montage der Elemente im DOM zu steuern.

component.ts

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

und component.html

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

Ich habe diesen Fehler erhalten, weil ich eine Variable in component.html verwendet habe, die in component.ts nicht deklariert wurde. Nachdem ich das Teil in HTML entfernt hatte, war dieser Fehler behoben.

Ich habe diesen Fehler erhalten, weil ich Redux-Aktionen in Modal versendet habe und Modal zu diesem Zeitpunkt nicht geöffnet war. Ich habe Aktionen ausgelöst, sobald die modale Komponente Eingaben erhalten hat. Also habe ich dort setTimeout platziert, um sicherzustellen, dass Modal geöffnet ist und dann die Aktionen gelöscht werden.

Für alle, die damit zu kämpfen haben. Hier ist eine Möglichkeit, diesen Fehler ordnungsgemäß zu debuggen: https://blog.angular-university.io/angular-debugging/

In meinem Fall habe ich diesen Fehler tatsächlich mit diesem [versteckten] Hack anstelle von * ngIf ... beseitigt.

Aber der Link, den ich bereitgestellt habe, hat es mir ermöglicht, THE GUILTY * ngIf zu finden :)

Genießen.

Die Lösung ... Services und RXJS ... Event-Emitter und Eigenschaftsbindung verwenden beide RXJs. Sie können sie besser selbst implementieren, haben mehr Kontrolle und sind einfacher zu debuggen. Denken Sie daran, dass Ereignisemitter rxjs verwenden. Erstellen Sie einfach einen Service und lassen Sie jede Komponente innerhalb eines Observable den Beobachter abonnieren und übergeben Sie je nach Bedarf entweder einen neuen Wert oder einen Cosume-Wert