ExpressionChangedAfterItHasBeenCheckedError Explained

Per favore spiegami perché continuo a ricevere questo errore: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked.

Ovviamente, lo ottengo solo in modalità dev, non accade sulla mia build di produzione, ma è molto fastidioso e semplicemente non capisco i vantaggi di avere un errore nel mio ambiente di sviluppo che non verrà visualizzato su prod - -probabilmente a causa della mia mancanza di comprensione.

Di solito, la correzione è abbastanza semplice, ho appena avvolto l'errore che causa il codice in un setTimeout in questo modo:

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

O forzare il rilevamento delle modifiche con un costruttore come questo constructor(private cd: ChangeDetectorRef) {}:

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

Ma perché mi imbatto costantemente in questo errore? Voglio capirlo in modo da poter evitare queste correzioni disordinate in futuro.

Ho avuto un problema simile. Guardando la documentazione di ganci del ciclo di vita , ho cambiato ngAfterViewInita ngAfterContentInited ha funzionato.

Questo errore indica un problema reale nella tua applicazione, quindi ha senso generare un'eccezione.

Nel devModerilevamento delle modifiche viene aggiunto un turno aggiuntivo dopo ogni normale esecuzione del rilevamento delle modifiche per verificare se il modello è stato modificato.

Se il modello è cambiato tra il turno di rilevamento cambio normale e quello aggiuntivo, ciò indica che

• il rilevamento del cambiamento stesso ha causato un cambiamento
• un metodo o getter restituisce un valore diverso ogni volta che viene chiamato

che sono entrambi cattivi, perché non è chiaro come procedere perché il modello potrebbe non stabilizzarsi mai.

Se le corse angolari cambiano il rilevamento fino a quando il modello non si stabilizza, potrebbe funzionare per sempre. Se Angular non esegue il rilevamento delle modifiche, la vista potrebbe non riflettere lo stato corrente del modello.

Vedi anche Qual è la differenza tra modalità di produzione e sviluppo in Angular2?

Un sacco di comprensione è arrivata una volta che ho capito i ganci del ciclo di vita angolare e la loro relazione con il rilevamento del cambiamento.

Stavo cercando di far sì che Angular aggiornasse una bandiera globale associata a *ngIfun elemento e stavo cercando di cambiare quella bandiera all'interno del ngOnInit()gancio del ciclo di vita di un altro componente.

Secondo la documentazione, questo metodo viene chiamato dopo che Angular ha già rilevato modifiche:

Chiamato una volta, dopo il primo ngOnChanges ().

Quindi l'aggiornamento del flag all'interno di ngOnChanges()non avvia il rilevamento delle modifiche. Quindi, una volta che il rilevamento delle modifiche si è innescato naturalmente, il valore della bandiera è cambiato e viene generato l'errore.

Nel mio caso, ho cambiato questo:

constructor(private globalEventsService: GlobalEventsService) {

}

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

A questa:

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

ngOnInit() {

}

e risolto il problema :)

Aggiornare

Consiglio vivamente di iniziare prima con l'auto-risposta del PO : pensa correttamente a cosa si può fare in constructorvs cosa si dovrebbe fare ngOnChanges().

Originale

Questa è più una nota a margine che una risposta, ma potrebbe aiutare qualcuno. Mi sono imbattuto in questo problema quando ho cercato di far dipendere la presenza di un pulsante dallo stato del modulo:

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

Per quanto ne so, questa sintassi porta all'aggiunta e alla rimozione del pulsante dal DOM in base alla condizione. Che a sua volta porta al ExpressionChangedAfterItHasBeenCheckedError.

La correzione nel mio caso (anche se non pretendo di cogliere tutte le implicazioni della differenza), era display: noneinvece usare :

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

Ci sono state risposte interessanti, ma non mi è sembrato di trovarne una adatta alle mie esigenze, la più vicina è quella di @ chittrang-mishra, che si riferisce solo a una funzione specifica e non a diverse opzioni come nella mia app.

Non volevo utilizzare [hidden]per trarre vantaggio dal fatto di *ngIfnon essere nemmeno parte del DOM, quindi ho trovato la seguente soluzione che potrebbe non essere la migliore per tutti poiché sopprime l'errore invece di correggerlo, ma nel mio caso in cui conosco il il risultato finale è corretto, sembra ok per la mia app.

Quello che ho fatto è stato implementare AfterViewChecked, aggiungere constructor(private changeDetector : ChangeDetectorRef ) {}e quindi

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

Spero che questo aiuti gli altri come molti altri mi hanno aiutato.

Le corse angolari cambiano il rilevamento e quando trova che alcuni valori che sono stati passati al componente figlio sono stati modificati, Angular genera l'errore:

ExpressionChangedAfterItHasBeenCheckedError clicca per di più

Per correggere ciò possiamo usare il AfterContentCheckedgancio del ciclo di vita e

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

  constructor(
  private cdref: ChangeDetectorRef) { }

  ngAfterContentChecked() {

    this.cdref.detectChanges();

  }

Nel mio caso, ho riscontrato questo problema nel mio file delle specifiche, durante l'esecuzione dei test.

Ho dovuto cambiare ngIf in [hidden]

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

per

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

Segui i passaggi seguenti:

1. Usa 'ChangeDetectorRef' importandolo da @ angular / core come segue:

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

2. Implementalo nel costruttore () come segue:

constructor(   private cdRef : ChangeDetectorRef  ) {}

3. Aggiungi il seguente metodo alla tua funzione che stai chiamando su un evento come il clic del pulsante. Quindi sembra così:

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

Stavo usando ng2-carouselamos (Angular 8 e Bootstrap 4)

Di seguito risolto il mio problema:

Cosa ho fatto:

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

Stavo affrontando lo stesso problema in quanto il valore stava cambiando in uno degli array nel mio componente. Ma invece di rilevare le modifiche sulla modifica del valore, ho modificato la strategia di rilevamento delle modifiche dei componenti in onPush(che rileverà le modifiche sulla modifica dell'oggetto e non sulla modifica del valore).

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

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

Facendo riferimento all'articolo https://blog.angularindepth.com/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4

Pertanto, i meccanismi alla base del rilevamento delle modifiche funzionano effettivamente in modo che sia il rilevamento delle modifiche sia i digest di verifica vengano eseguiti in modo sincrono. Ciò significa che se aggiorniamo le proprietà in modo asincrono i valori non verranno aggiornati quando il ciclo di verifica è in esecuzione e non avremo ExpressionChanged...errori. Il motivo per cui si ottiene questo errore è, durante il processo di verifica, Angular vede valori diversi da quelli registrati durante la fase di rilevamento delle modifiche. Quindi per evitarlo ....

1) Utilizzare changeDetectorRef

2) usa setTimeOut. Ciò eseguirà il codice in un'altra macchina virtuale come macro-attività. Angular non vedrà queste modifiche durante il processo di verifica e non si otterrà quell'errore.

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

3) Se vuoi davvero eseguire il tuo codice sulla stessa VM, usa come

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

Questo creerà un micro-task. La coda delle micro-attività viene elaborata al termine dell'esecuzione dell'attuale codice sincrono, quindi l'aggiornamento della proprietà avverrà dopo il passaggio di verifica.

@HostBinding può essere una fonte confusa di questo errore.

Ad esempio, supponiamo che tu abbia il seguente binding host in un componente

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

Per semplicità, supponiamo che questa proprietà sia aggiornata tramite la seguente proprietà di input:

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

Nel componente genitore lo stai programmando ngAfterViewInit

@ViewChild(ImageCarousel) carousel: ImageCarousel;

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

Ecco cosa succede:

• Il componente principale è stato creato
• Il componente ImageCarousel viene creato e assegnato a carousel(tramite ViewChild)
• Non possiamo accedere carouselfino a ngAfterViewInit()(sarà nullo)
• Assegniamo la configurazione, che imposta style_groupBG = 'red'
• Questo a sua volta imposta background: redsul componente host ImageCarousel
• Questo componente è "di proprietà" del componente principale, quindi quando verifica la presenza di modifiche trova una modifica carousel.style.backgrounde non è abbastanza intelligente da sapere che questo non è un problema, quindi genera l'eccezione.

Una soluzione è quella di introdurre un altro wrapper div insider ImageCarousel e impostare il colore di sfondo su quello, ma poi non si ottengono alcuni dei vantaggi dell'utilizzo HostBinding(come consentire al genitore di controllare i limiti completi dell'oggetto).

La soluzione migliore, nel componente padre è aggiungere detectChanges () dopo aver impostato la configurazione.

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

Questo può sembrare abbastanza ovvio come questo, e molto simile ad altre risposte, ma c'è una sottile differenza.

Considera il caso in cui non lo aggiungi @HostBindingpiù tardi durante lo sviluppo. Improvvisamente si ottiene questo errore e non sembra avere alcun senso.

Ecco i miei pensieri su ciò che sta accadendo. Non ho letto la documentazione, ma sono sicuro che questo fa parte del motivo per cui viene mostrato l'errore.

*ngIf="isProcessing()" 

Quando si utilizza * ngIf, cambia fisicamente il DOM aggiungendo o rimuovendo l'elemento ogni volta che cambia la condizione. Quindi, se la condizione cambia prima di essere renderizzata alla vista (che è altamente possibile nel mondo di Angular), viene generato l'errore. Vedi la spiegazione qui tra modalità di sviluppo e produzione.

[hidden]="isProcessing()"

Quando lo si utilizza [hidden]non cambia fisicamenteDOM ma semplicemente si nasconde il elementdalla vista, molto probabilmente usando CSSnella parte posteriore. L'elemento è ancora presente nel DOM ma non visibile a seconda del valore della condizione. Ecco perché l'errore non si verificherà durante l'utilizzo [hidden].

Per il mio problema, stavo leggendo github - "ExpressionChangedAfterItHasBeenCheckedError durante la modifica di un valore 'non modello' del componente in afterViewInit" e ho deciso di aggiungere ngModel

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

Risolto il mio problema, spero che aiuti qualcuno.

Suggerimenti per il debug

Questo errore può essere abbastanza confuso ed è facile fare un'ipotesi sbagliata esattamente quando si sta verificando. Trovo utile aggiungere molte dichiarazioni di debug come questa in tutti i componenti interessati nei punti appropriati. Questo aiuta a capire il flusso.

Nel genitore inserisci istruzioni come questa (la stringa esatta 'EXPRESSIONCHANGED' è importante), ma a parte questo, questi sono solo esempi:

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

Nei callback figlio / servizi / timer:

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

Se esegui detectChangesmanualmente aggiungi anche la registrazione per quello:

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

Quindi nel debugger di Chrome basta filtrare per "EXPRESSIONCHANGES". Questo ti mostrerà esattamente il flusso e l'ordine di tutto ciò che viene impostato, e anche esattamente in quale punto angolare genera l'errore.

Puoi anche fare clic sui collegamenti grigi per inserire i punti di interruzione.

Un'altra cosa da tenere d'occhio se hai proprietà con nomi simili in tutta l'applicazione (come style.background) assicurati di eseguire il debug di quello che pensi - impostandolo su un valore di colore oscuro.

Nel mio caso, avevo una proprietà asincrona LoadingServicecon un oggetto comportamentaleisLoading

L'uso del modello [nascosto] funziona, ma * ngIf ha esito negativo

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

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

Una soluzione che ha funzionato per me usando 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();
}

Ho avuto questo tipo di errore in Ionic3 (che utilizza Angular 4 come parte del suo stack tecnologico).

Per me lo stava facendo:

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

Quindi stavo cercando di cambiare in modo condizionale il tipo di icona di ioni da a pina a remove-circle, per una modalità su cui operava uno schermo.

Immagino che dovrò aggiungere un *ngIfinvece.

Il mio problema era evidente quando l'ho aggiunto, *ngIfma non era questa la causa. L'errore è stato causato modificando il modello nei {{}}tag e successivamente cercando di visualizzare il modello modificato nell'istruzione *ngIf. Ecco un esempio:

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

Per risolvere il problema, ho cambiato il modo in cui ho chiamato changeMyModelValue()in un posto che aveva più senso.

Nella mia situazione, volevo essere changeMyModelValue()chiamato ogni volta che un componente figlio cambiava i dati. Ciò ha richiesto la creazione e l'emissione di un evento nel componente figlio in modo che il genitore potesse gestirlo (chiamando changeMyModelValue(). Vedere https://angular.io/guide/component-interaction#parent-listens-for-child-event

Spero che questo aiuti qualcuno che viene qui: facciamo chiamate di servizio nel ngOnInitmodo seguente e utilizziamo una variabiledisplayMain per controllare il montaggio degli elementi sul DOM.

component.ts

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

e component.html

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

Ho ricevuto questo errore perché stavo usando una variabile in component.html che non è stata dichiarata in component.ts. Una volta rimossa la parte in HTML, questo errore era scomparso.

Ho ricevuto questo errore perché stavo inviando azioni redux in modale e il modale non era aperto in quel momento. Stavo spedendo azioni nel momento in cui il componente modale riceveva input. Quindi ho messo setTimeout lì per assicurarmi che il modale fosse aperto e quindi le azioni fossero indirizzate.

A chiunque abbia difficoltà con questo. Ecco un modo per eseguire correttamente il debug di questo errore: https://blog.angular-university.io/angular-debugging/

Nel mio caso, in effetti mi sono sbarazzato di questo errore usando questo hack [nascosto] invece di * ngIf ...

Ma il link che ho fornito mi ha permesso di trovare THE GUILTY * ngIf :)

Godere.

La soluzione ... servizi e rxjs ... gli emettitori di eventi e l'associazione di proprietà usano entrambi rxjs..sei meglio implementare te stesso, più controllo, più facile da eseguire il debug. Ricorda che gli emettitori di eventi utilizzano rxjs. Semplicemente, crea un servizio e all'interno di un osservabile, fai in modo che ciascun componente si abboni all'osservatore e passi nuovo valore o valore di consumo secondo necessità