|
2 | 2 |
|
3 | 3 | <docs-video src="https://www.youtube.com/embed/O47uUnJjbJc"/> |
4 | 4 |
|
5 | | -Angular throws an `ExpressionChangedAfterItHasBeenCheckedError` when an expression value has been changed after change detection has completed. Angular only throws this error in development mode. |
| 5 | +Angular lanza un `ExpressionChangedAfterItHasBeenCheckedError` cuando el valor de una expresión ha cambiado después de que la detección de cambios ha completado. Angular solo lanza este error en modo de desarrollo. |
6 | 6 |
|
7 | | -In development mode, Angular performs an additional check after each change detection run, to ensure the bindings haven't changed. This catches errors where the view is left in an inconsistent state. This can occur, for example, if a method or getter returns a different value each time it is called, or if a child component changes values on its parent. If either of these occurs, this is a sign that change detection is not stabilized. Angular throws the error to ensure data is always reflected correctly in the view, which prevents erratic UI behavior or a possible infinite loop. |
| 7 | +En modo de desarrollo, Angular realiza una verificación adicional después de cada ejecución de detección de cambios para asegurarse de que los enlaces no hayan cambiado. Esto detecta errores donde la vista queda en un estado inconsistente. Esto puede ocurrir, por ejemplo, si un método o getter devuelve un valor diferente cada vez que se llama, o si un componente hijo cambia valores en su componente padre. Si cualquiera de estos casos ocurre, es una señal de que la detección de cambios no se ha estabilizado. Angular lanza el error para garantizar que los datos siempre se reflejen correctamente en la vista, lo que previene un comportamiento errático de la UI o un posible bucle infinito. |
8 | 8 |
|
9 | | -This error commonly occurs when you've added template expressions or have begun to implement lifecycle hooks like `ngAfterViewInit` or `ngOnChanges`. It is also common when dealing with loading status and asynchronous operations, or when a child component changes its parent bindings. |
| 9 | +Este error ocurre comúnmente cuando has agregado expresiones de plantilla o has comenzado a implementar hooks de ciclo de vida como `ngAfterViewInit` o `ngOnChanges`. También es común cuando se trabaja con estados de carga y operaciones asíncronas, o cuando un componente hijo cambia los enlaces de su componente padre. |
10 | 10 |
|
11 | | -## Debugging the error |
| 11 | +## Depurando el error |
12 | 12 |
|
13 | | -The [source maps](https://developer.mozilla.org/docs/Tools/Debugger/How_to/Use_a_source_map) generated by the CLI are very useful when debugging. Navigate up the call stack until you find a template expression where the value displayed in the error has changed. |
| 13 | +Los [source maps](https://developer.mozilla.org/docs/Tools/Debugger/How_to/Use_a_source_map) generados por el CLI son muy útiles para depurar. Navega hacia arriba en la pila de llamadas hasta encontrar una expresión de plantilla donde el valor mostrado en el error haya cambiado. |
14 | 14 |
|
15 | | -Ensure that there are no changes to the bindings in the template after change detection is run. This often means refactoring to use the correct component lifecycle hook for your use case. If the issue exists within `ngAfterViewInit`, the recommended solution is to use a constructor or `ngOnInit` to set initial values, or use `ngAfterContentInit` for other value bindings. |
| 15 | +Asegúrate de que no haya cambios en los enlaces de la plantilla después de que se ejecute la detección de cambios. Esto generalmente implica refactorizar para usar el hook de ciclo de vida correcto para tu caso de uso. Si el problema existe dentro de `ngAfterViewInit`, la solución recomendada es usar un constructor o `ngOnInit` para establecer valores iniciales, o usar `ngAfterContentInit` para otros enlaces de valores. |
16 | 16 |
|
17 | | -If you are binding to methods in the view, ensure that the invocation does not update any of the other bindings in the template. |
| 17 | +Si estás enlazando a métodos en la vista, asegúrate de que la invocación no actualice ninguno de los otros enlaces en la plantilla. |
18 | 18 |
|
19 | | -Read more about which solution is right for you in ['Everything you need to know about the "ExpressionChangedAfterItHasBeenCheckedError" error'](https://angularindepth.com/posts/1001/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error) and why this is useful at ['Angular Debugging "Expression has changed after it was checked": Simple Explanation (and Fix)'](https://blog.angular-university.io/angular-debugging). |
| 19 | +Lee más sobre qué solución es la correcta para ti en ['Everything you need to know about the "ExpressionChangedAfterItHasBeenCheckedError" error'](https://angularindepth.com/posts/1001/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error) y por qué esto es útil en ['Angular Debugging "Expression has changed after it was checked": Simple Explanation (and Fix)'](https://blog.angular-university.io/angular-debugging). |
0 commit comments