5 lines
4.4 KiB
JSON
5 lines
4.4 KiB
JSON
{
|
||
"id": "errors/NG0100",
|
||
"title": "NG0100: Expression has changed after it was checked",
|
||
"contents": "<h1 id=\"ng0100-expression-has-changed-after-it-was-checked\">NG0100: Expression has changed after it was checked<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"errors/NG0100#ng0100-expression-has-changed-after-it-was-checked\"><i class=\"material-icons\">link</i></a></h1>\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/errors/NG0100.md?message=docs(...)%3A%20describe%20your%20change...\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n</div>\n\n\n<div class=\"error-video-container\">\n <iframe src=\"https://www.youtube.com/embed/O47uUnJjbJc\" frameborder=\"0\" allow=\"accelerometer; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>\n</div>\n\n\n\n<div class=\"content\">\n <h2 id=\"description\">Description<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"errors/NG0100#description\"><i class=\"material-icons\">link</i></a></h2>\n <p>Angular throws an <code>ExpressionChangedAfterItHasBeenCheckedError</code> when an expression value has been changed after change detection has completed. Angular only throws this error in development mode.</p>\n<p>In dev 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.</p>\n<p>This error commonly occurs when you’ve added template expressions or begun to implement lifecycle hooks like <code>ngAfterViewInit</code> or <code>ngOnChanges</code>. It is also common when dealing with loading status and asynchronous operations, or a child component changes its parent bindings.</p>\n\n</div>\n<br>\n<div class=\"debugging\">\n <h2 id=\"debugging-the-error\">Debugging the error<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"errors/NG0100#debugging-the-error\"><i class=\"material-icons\">link</i></a></h2>\n <p>The <a href=\"https://developer.mozilla.org/en-US/docs/Tools/Debugger/How_to/Use_a_source_map\">source maps</a> 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.</p>\n<p>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 <a href=\"guide/lifecycle-hooks\">component lifecycle hook</a> for your use case. If the issue exists within <code>ngAfterViewInit</code>, the recommended solution is to use a constructor or <code>ngOnInit</code> to set initial values, or use <code>ngAfterContentInit</code> for other value bindings.</p>\n<p>If you are binding to methods in the view, ensure that the invocation does not update any of the other bindings in the template.</p>\n<p>Read more about which solution is right for you in <a href=\"https://indepth.dev/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error/\">'Everything you need to know about the \"ExpressionChangedAfterItHasBeenCheckedError\" error'</a> and why this is useful at <a href=\"https://blog.angular-university.io/angular-debugging/\">'Angular Debugging \"Expression has changed after it was checked\": Simple Explanation (and Fix)'</a>.</p>\n\n</div>\n\n<!-- links to this doc:\n - errors\n-->\n<!-- links from this doc:\n - errors/NG0100#debugging-the-error\n - errors/NG0100#description\n - errors/NG0100#ng0100-expression-has-changed-after-it-was-checked\n - guide/lifecycle-hooks\n - https://blog.angular-university.io/angular-debugging/\n - https://developer.mozilla.org/en-US/docs/Tools/Debugger/How_to/Use_a_source_map\n - https://github.com/angular/angular/edit/master/aio/content/errors/NG0100.md?message=docs(...)%3A%20describe%20your%20change...\n - https://indepth.dev/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error/\n-->"
|
||
} |