Luego de consultar expertos en esta materia, programadores de varias áreas y maestros hemos dado con la respuesta al problema y la compartimos en esta publicación.
Descripción
Angular lanza un ExpressionChangedAfterItHasBeenCheckedError cuando se ha cambiado un valor de expresión después de que se haya completado la detección de cambios. Angular solo arroja este error en el modo de desarrollo.
En el modo de desarrollo, Angular realiza una verificación adicional después de cada ejecución de detección de cambios para garantizar que los enlaces no hayan cambiado. Esto detecta errores donde la vista se deja en un estado inconsistente. Esto puede ocurrir, por ejemplo, si un método o captador devuelve un valor diferente cada vez que se llama, o si un componente secundario cambia los valores de su componente principal. Si ocurre cualquiera de estos, es una señal de que la detección de cambios no está estabilizada. Angular arroja el error para garantizar que los datos siempre se reflejen correctamente en la vista, lo que evita el comportamiento errático de la interfaz de usuario o un posible bucle infinito.
Este error ocurre comúnmente cuando agregó expresiones de plantilla o comenzó a implementar enlaces de ciclo de vida como ngAfterViewInit o ngOnChanges. También es común cuando se trata de estado de carga y operaciones asincrónicas, o cuando un componente secundario cambia sus enlaces principales.
Depurando el error
Él mapas fuente generados por la CLI son muy útiles al depurar. Navegue hacia arriba en la pila de llamadas hasta que encuentre una expresión de plantilla donde el valor que se muestra en el error haya cambiado.
Asegúrese de que no haya cambios en los enlaces de la plantilla después de ejecutar la detección de cambios. Esto a menudo significa refactorizar para usar el enlace de ciclo de vida del componente correcto para su caso de uso. Si el problema existe dentro ngAfterViewInitla solución recomendada es utilizar un constructor o ngOnInit para establecer los valores iniciales, o utilizar ngAfterContentInit para otros enlaces de valor.
Si está enlazando métodos en la vista, asegúrese de que la invocación no actualice ninguno de los otros enlaces en la plantilla.
Obtenga más información sobre qué solución es adecuada para usted en ‘Todo lo que necesita saber sobre el error “ExpressionChangedAfterItHasBeenCheckedError”‘ y por qué esto es útil en ‘Depuración angular “La expresión ha cambiado después de que se verificó”: explicación simple (y corrección)’.