mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
Joe Martin (Crowdstaffing)
61894570f1
improve markdown for documentation. Duplicate of #45325 that targets 13.3.x. PR Close #45590
40 lines
2.5 KiB
Markdown
40 lines
2.5 KiB
Markdown
@name Expression Changed After Checked
|
|
@category runtime
|
|
@videoUrl https://www.youtube.com/embed/O47uUnJjbJc
|
|
@shortDescription Expression has changed after it was checked
|
|
|
|
@description
|
|
|
|
Angular throws an `ExpressionChangedAfterItHasBeenCheckedError` when an expression value has been changed after change detection has completed.
|
|
Angular only throws this error in development mode.
|
|
|
|
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 occur, 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.
|
|
|
|
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.
|
|
|
|
@debugging
|
|
|
|
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.
|
|
|
|
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](guide/lifecycle-hooks) 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.
|
|
|
|
If you are binding to methods in the view, ensure that the invocation does not update any of the other bindings in the template.
|
|
|
|
Read more about which solution is right for you in ['Everything you need to know about the "ExpressionChangedAfterItHasBeenCheckedError" error'](https://indepth.dev/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).
|
|
|
|
<!-- links -->
|
|
|
|
<!-- external links -->
|
|
|
|
<!-- end links -->
|
|
|
|
@reviewed 2022-02-28
|