Angular 5, Expression has changed after it was checked

Creando una applicazione Angular 5 potreste incorrere in questo errore visualizzato nella console del browser:
ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ngIf: false'. Current value: 'ngIf: true'.
at viewDebugError (core.js:9817)
at expressionChangedAfterItHasBeenCheckedError (core.js:9795)
at checkBindingNoChanges (core.js:9962)
at checkNoChangesNodeInline (core.js:14010)
at checkNoChangesNode (core.js:13984)
at debugCheckNoChangesNode (core.js:14813)
at debugCheckDirectivesFn (core.js:14715)
at Object.eval [as updateDirectives] (NotificationComponent.html:1)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:14697)
at checkNoChangesView (core.js:13822)
nonostante l'errore, l'applicazione funziona regolarmente.
Nella console viene riportato, assieme all'errore, il nome del componente che ha generato l'errore, ma non è detto che sia lui la causa.

Nel mio caso, si trattava del componente che stavo aprendo in quel momento, una popup. E' bastato cambiare, nel metodo ngOnInit, da:

TypeScript

ngOnInit() {
  this.dataService.userGetById(this.id).subscribe(result => {
		...
  }, error => console.error(error));
}
a:

TypeScript

ngOnInit() {
  setTimeout(() => this.loadData(), 0);
}

private loadData(): void {
  this.dataService.userGetById(this.id).subscribe(result => {
    ...
  }, error => console.error(error));
}
aggiungendo un:

TypeScript

setTimeout( () => { ...codice... }, 0)
in modo da creare un piccolo ritardo ed evitare la contemporaneità degli aggiornamenti del componente condiviso che segnalava gli errori.
Tags:
Angular7 Errori120 TypeScript15
Potrebbe interessarti anche: