ExpressionChangedAfterItHasBeenCheckedError Explicado

Explícame por qué sigo recibiendo este error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked.

Obviamente, solo lo obtengo en modo de desarrollo, no sucede en mi versión de producción, pero es muy molesto y simplemente no entiendo los beneficios de tener un error en mi entorno de desarrollo que no aparecerá en prod. -probablemente debido a mi falta de comprensión.

Por lo general, la solución es bastante fácil, solo envuelvo el error que causa el código en un setTimeout como este:

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

O forzar la detección de cambios con un constructor como este constructor(private cd: ChangeDetectorRef) {}:

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

Pero, ¿por qué me encuentro constantemente con este error? Quiero entenderlo para poder evitar estas soluciones hacky en el futuro.

Tuve un problema similar En cuanto a la documentación de los ganchos del ciclo de vida , he cambiado ngAfterViewInita ngAfterContentInity funcionó.

Este error indica un problema real en su aplicación, por lo tanto, tiene sentido lanzar una excepción.

En devMode detección de cambios, se agrega un giro adicional después de cada ejecución de detección de cambios regular para verificar si el modelo ha cambiado.

Si el modelo ha cambiado entre el turno de detección de cambio regular y el adicional, esto indica que

• la detección de cambios en sí ha causado un cambio
• un método o getter devuelve un valor diferente cada vez que se llama

ambos son malos, porque no está claro cómo proceder porque el modelo podría nunca estabilizarse.

Si Angular ejecuta la detección de cambios hasta que el modelo se estabilice, podría ejecutarse para siempre. Si Angular no ejecuta la detección de cambios, entonces la vista podría no reflejar el estado actual del modelo.

Consulte también ¿Cuál es la diferencia entre el modo de producción y desarrollo en Angular2?

Mucho entendimiento llegó una vez que entendí los Angular Lifecycle Hooks y su relación con la detección de cambios.

Estaba tratando de hacer que Angular actualizara una bandera global vinculada a *ngIfun elemento, y estaba tratando de cambiar esa bandera dentro del ngOnInit()gancho del ciclo de vida de otro componente.

Según la documentación, se llama a este método después de que Angular ya haya detectado cambios:

Llamado una vez, después de los primeros ngOnChanges ().

Por lo tanto, actualizar el indicador dentro de ngOnChanges()no iniciará la detección de cambios. Luego, una vez que la detección de cambios se ha activado naturalmente nuevamente, el valor de la bandera ha cambiado y se produce el error.

En mi caso, cambié esto:

constructor(private globalEventsService: GlobalEventsService) {

}

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

A esto:

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

ngOnInit() {

}

y solucionó el problema :)

Actualizar

Recomiendo encarecidamente comenzar primero con la respuesta propia del OP : piense correctamente en lo que se puede hacer en constructorcomparación con lo que se debe hacer en ngOnChanges().

Original

Esto es más una nota al margen que una respuesta, pero podría ayudar a alguien. Me topé con este problema al intentar hacer que la presencia de un botón dependiera del estado del formulario:

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

Hasta donde yo sé, esta sintaxis hace que el botón se agregue y elimine del DOM según la condición. Lo que a su vez conduce a la ExpressionChangedAfterItHasBeenCheckedError.

La solución en mi caso (aunque no pretendo comprender todas las implicaciones de la diferencia), fue usar display: noneen su lugar:

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

Hubo respuestas interesantes, pero no encontré una para satisfacer mis necesidades, la más cercana de @ chittrang-mishra, que se refiere solo a una función específica y no a varios conmutadores como en mi aplicación.

No quería usar [hidden]para aprovechar *ngIfni siquiera ser parte del DOM, así que encontré la siguiente solución, que puede no ser la mejor para todos, ya que suprime el error en lugar de corregirlo, pero en mi caso, donde sé el El resultado final es correcto, parece estar bien para mi aplicación.

Lo que hice fue implementar AfterViewChecked, agregar constructor(private changeDetector : ChangeDetectorRef ) {}y luego

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

Espero que esto ayude a otros como muchos otros me han ayudado.

Angular ejecuta la detección de cambios y cuando encuentra que algunos valores que se han pasado al componente secundario han cambiado, Angular arroja el error:

ExpressionChangedAfterItHasBeenCheckedError haga clic para más

Para corregir esto, podemos usar el AfterContentCheckedgancho del ciclo de vida y

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

  constructor(
  private cdref: ChangeDetectorRef) { }

  ngAfterContentChecked() {

    this.cdref.detectChanges();

  }

En mi caso, tuve este problema en mi archivo de especificaciones, mientras ejecutaba mis pruebas.

Tuve que cambiar ngIf a [hidden]

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

a

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

Siga los pasos a continuación:

1. Use 'ChangeDetectorRef' importándolo de @ angular / core de la siguiente manera:

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

2. Impleméntelo en constructor () de la siguiente manera:

constructor(   private cdRef : ChangeDetectorRef  ) {}

3. Agregue el siguiente método a su función que está llamando en un evento como hacer clic en el botón. Entonces se ve así:

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

Estaba usando ng2-carouselamos (Angular 8 y Bootstrap 4)

A continuación se solucionó mi problema:

Lo que hice:

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

Estaba enfrentando el mismo problema ya que el valor estaba cambiando en una de las matrices de mi componente. Pero en lugar de detectar los cambios en el cambio de valor, cambié la estrategia de detección de cambio de componente a onPush(que detectará cambios en el cambio de objeto y no en el cambio de valor).

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

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

En referencia al artículo https://blog.angularindepth.com/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4

Por lo tanto, la mecánica detrás de la detección de cambios en realidad funciona de manera que tanto los resúmenes de detección de cambios como los de verificación se realizan sincrónicamente. Eso significa que si actualizamos las propiedades de forma asincrónica, los valores no se actualizarán cuando se ejecute el bucle de verificación y no obtendremos ningún ExpressionChanged...error. La razón por la que obtenemos este error es que, durante el proceso de verificación, Angular ve valores diferentes de los que registró durante la fase de detección de cambios. Entonces para evitar eso ...

1) Use changeDetectorRef

2) usa setTimeOut. Esto ejecutará su código en otra VM como una macro tarea. Angular no verá estos cambios durante el proceso de verificación y no obtendrá ese error.

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

3) Si realmente desea ejecutar su código en la misma VM, use como

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

Esto creará una microtarea. La cola de micro tareas se procesa después de que el código síncrono actual ha terminado de ejecutarse, por lo tanto, la actualización de la propiedad se realizará después del paso de verificación.

@HostBinding puede ser una fuente confusa de este error.

Por ejemplo, supongamos que tiene el siguiente enlace de host en un componente

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

Para simplificar, digamos que esta propiedad se actualiza mediante la siguiente propiedad de entrada:

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

En el componente principal lo está configurando programáticamente ngAfterViewInit

@ViewChild(ImageCarousel) carousel: ImageCarousel;

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

Esto es lo que pasa:

• Se crea su componente principal
• El componente ImageCarousel se crea y se asigna a carousel(a través de ViewChild)
• No podemos acceder carouselhasta ngAfterViewInit()(será nulo)
• Asignamos la configuración, que establece style_groupBG = 'red'
• Esto a su vez se establece background: reden el componente host ImageCarousel
• Este componente es 'propiedad' de su componente principal, por lo que cuando busca cambios, encuentra un cambio carousel.style.backgroundy no es lo suficientemente inteligente como para saber que esto no es un problema, por lo que arroja la excepción.

Una solución es introducir otro contenedor de información privilegiada ImageCarousel y establecer el color de fondo en eso, pero luego no obtendrá algunos de los beneficios del uso HostBinding(como permitir que el padre controle los límites completos del objeto).

La mejor solución, en el componente principal es agregar detectChanges () después de configurar la configuración.

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

Esto puede parecer bastante obvio como este, y muy similar a otras respuestas, pero hay una sutil diferencia.

Considere el caso en el que no agrega @HostBindinghasta más tarde durante el desarrollo. De repente, obtienes este error y no parece tener ningún sentido.

Aquí están mis pensamientos sobre lo que está sucediendo. No he leído la documentación, pero estoy seguro de que esto es parte de por qué se muestra el error.

*ngIf="isProcessing()" 

Cuando se usa * ngIf, cambia físicamente el DOM al agregar o eliminar el elemento cada vez que cambia la condición. Entonces, si la condición cambia antes de que se muestre en la vista (que es muy posible en el mundo de Angular), se produce el error. Vea la explicación aquí entre los modos de desarrollo y producción.

[hidden]="isProcessing()"

Cuando se usa [hidden], no cambia físicamente DOMsino que simplemente lo oculta elementde la vista, lo más probable es que lo use CSSen la parte posterior. El elemento todavía está allí en el DOM pero no es visible dependiendo del valor de la condición. Es por eso que el error no ocurrirá al usar [hidden].

Para mi problema, estaba leyendo github - "ExpressionChangedAfterItHasBeenCheckedError al cambiar el valor de un componente 'no modelo' en afterViewInit" y decidí agregar el ngModel

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

Se solucionó mi problema, espero que ayude a alguien.

Consejos de depuración

Este error puede ser bastante confuso, y es fácil hacer una suposición errónea sobre cuándo exactamente está ocurriendo. Encuentro útil agregar muchas declaraciones de depuración como esta en todos los componentes afectados en los lugares apropiados. Esto ayuda a entender el flujo.

En el padre, ponga declaraciones como esta (la cadena exacta 'EXPRESSIONCHANGED' es importante), pero aparte de eso, estos son solo ejemplos:

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

En las devoluciones de llamada de niño / servicios / temporizador:

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

Si ejecuta detectChangesmanualmente, agregue el registro para eso también:

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

Luego, en el depurador de Chrome, simplemente filtre por 'EXPRESSIONCHANGES'. Esto le mostrará exactamente el flujo y el orden de todo lo que se establece, y también exactamente en qué punto Angular arroja el error.

También puede hacer clic en los enlaces grises para colocar puntos de interrupción.

Otra cosa a tener en cuenta si tiene propiedades con nombres similares en toda su aplicación (como style.background) asegúrese de depurar la que cree, configurándola en un valor de color oscuro.

En mi caso, tenía una propiedad asíncrona LoadingServicecon un BehavioralSubjectisLoading

El uso del modelo [oculto] funciona, pero * ngIf falla

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

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

Una solución que funcionó para mí 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();
}

Tuve este tipo de error en Ionic3 (que usa Angular 4 como parte de su pila de tecnología).

Para mí estaba haciendo esto:

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

Así que estaba tratando de cambiar condicionalmente el tipo de un ícono iónico de a pina a remove-circle, según el modo en que funcionaba una pantalla.

Supongo que tendré que agregar un *ngIfen su lugar.

Mi problema fue manifiesto cuando agregué *ngIfpero esa no fue la causa. El error fue causado al cambiar el modelo en las {{}}etiquetas y luego tratar de mostrar el modelo modificado en la *ngIfdeclaración posterior. Aquí hay un ejemplo:

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

Para solucionar el problema, cambié donde llamé changeMyModelValue()a un lugar que tenía más sentido.

En mi situación, quería que me changeMyModelValue()llamaran cada vez que un componente secundario cambiaba los datos. Esto requirió que creara y emitiera un evento en el componente hijo para que el padre pudiera manejarlo (llamando changeMyModelValue(). Ver https://angular.io/guide/component-interaction#parent-listens-for-child-event

Espero que esto ayude a alguien que viene aquí: hacemos llamadas de servicio ngOnInitde la siguiente manera y usamos una variabledisplayMain para controlar el Montaje de los elementos en el DOM.

componente.ts

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

y component.html

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

Recibí este error porque estaba usando una variable en component.html que no fue declarada en component.ts. Una vez que eliminé la parte en HTML, este error desapareció.

Recibí este error porque estaba enviando acciones redux en modal y modal no estaba abierto en ese momento. Estaba enviando acciones en el momento en que el componente modal recibe la entrada. Así que puse setTimeout allí para asegurarme de que modal está abierto y luego las acciones están dipatched.

Para cualquiera que esté luchando con esto. Aquí hay una manera de depurar correctamente este error: https://blog.angular-university.io/angular-debugging/

En mi caso, de hecho me libré de este error usando este truco [oculto] en lugar de * ngSi ...

Pero el enlace que proporcioné me permitió encontrar EL CULPABLE * ngIf :)

Disfrutar.

La solución ... los servicios y los rxjs ... los emisores de eventos y el enlace de propiedad usan rxjs ... es mejor implementarlo usted mismo, más control, más fácil de depurar. Recuerde que los emisores de eventos están utilizando rxjs. Simplemente, cree un servicio y dentro de un observable, haga que cada componente se suscriba al observador y pase un nuevo valor o un valor de costo según sea necesario