Explíqueme por qué sigo recibiendo este error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked.
Obviamente, solo lo obtengo en el modo de desarrollo, no sucede en mi compilació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 producción. -Probablemente por mi falta de comprensión.
Por lo general, la solución es bastante fácil, simplemente envuelvo el código que causa el error en un setTimeout como este:
setTimeout(()=> { this.isLoading = true; }, 0); O fuerce 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 correcciones de piratería en el futuro.
Tuve un problema similar. Mirando la documentación de los ganchos del ciclo de vida, cambié ngAfterViewInit a ngAfterContentInit y funcionó.
Este error indica un problema real en su aplicación, por lo que tiene sentido lanzar una excepción.
En devMode , la detección de cambios agrega un turno adicional después de cada ejecución regular de detección de cambios para verificar si el modelo ha cambiado.
Si el modelo ha cambiado entre el turno de detección de cambio normal y adicional, esto indica que
ambos son malos, porque no está claro cómo proceder porque el modelo podría no estabilizarse nunca.
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, es posible que la vista no refleje el estado actual del modelo.
Consulte también ¿Cuál es la diferencia entre el modo de producción y el de desarrollo en Angular2?
Entendí mucho una vez que entendí los ganchos de ciclo de vida angular y su relación con la detección de cambios.
Estaba tratando de hacer que Angular actualizara un indicador global vinculado al *ngIf de un elemento, y estaba tratando de cambiar ese indicador dentro del gancho del ciclo de vida ngOnInit() de otro componente.
Según la documentación, este método se llama después de que Angular ya haya detectado cambios:
Llamado una vez, después del primer 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 disparado de nuevo de forma natural, el valor de la bandera ha cambiado y se lanza 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 :)