-{"id":"errors/NG0100","title":"NG0100：在检查后，表达式已更改","contents":"<div class=\"content\">\n\n <h1 id=\"ng0100-expression-has-changed-after-it-was-checked\" data-ng_translator_product=\"100\" data-ng_translator_ref_id=\"2ywt8i7ldllmsa98xkeivjd5s\">NG0100：在检查后，表达式已更改<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\n \n <div class=\"video-container\">\n <video controls>\n <source src=\"https://www.youtube.com/embed/O47uUnJjbJc.webm\" type=\"video/webm\">\n <source src=\"https://www.youtube.com/embed/O47uUnJjbJc.mp4\" type=\"video/mp4\">\n <track src=\"https://www.youtube.com/embed/O47uUnJjbJc.en.vtt\" label=\"English\" kind=\"subtitles\" srclang=\"en\">\n <track src=\"https://www.youtube.com/embed/O47uUnJjbJc.cn.vtt\" label=\"简体中文\" kind=\"subtitles\" srclang=\"zh-CN\" default>\n <track src=\"https://www.youtube.com/embed/O47uUnJjbJc.tw.vtt\" label=\"正體中文\" kind=\"subtitles\" srclang=\"zh-TW\">\n </video>\n </div>\n \n \n\n <div class=\"error-description\">\n <h2 id=\"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 data-ng_translator_product=\"100\" data-ng_translator_ref_id=\"cfpwpjri2pustxtc090vx0nlo\">当变更检测完成后又更改了表达式值时，Angular 就会抛出 <code>ExpressionChangedAfterItHasBeenCheckedError</code> 错误。Angular 只会在开发模式下抛出此错误。</p>\n<p data-ng_translator_product=\"100\" data-ng_translator_ref_id=\"d6p64tf13ncc8ooq5rtbvt2vj\">在开发模式下，Angular 在每次变更检测运行后都会执行一次附加检查，以确保绑定没有更改。这会在视图处于不一致状态时捕获错误。比如，如果某个方法或 getter 每次被调用时都会返回一个不同的值，或者某个子组件更改了其父组件上的值，就可能会发生这种情况。如果发生这两种情况，则表明变更检测是不稳定的。Angular 会抛出错误以确保数据始终正确地反映在视图中，从而防止 UI 行为不稳定或可能的无限循环。</p>\n<p data-ng_translator_product=\"100\" data-ng_translator_ref_id=\"5pcuz3mxf9rp4mb445bbf5po2\">当你添加了模板表达式或开始实现生命周期钩子（比如 <code>ngAfterViewInit</code> 或 <code>ngOnChanges</code>）时，容易发生此错误。在处理加载状态和异步操作，或者子组件更改其父组件中的绑定时，这也很常见。</p>\n\n </div>\n\n\n \n <br>\n\n <div class=\"debugging\">\n <h2 id=\"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 data-ng_translator_product=\"100\" data-ng_translator_ref_id=\"7wh2hjtzzwhdoaom62w3oq9d2\"><a href=\"https://developer.mozilla.org/docs/Tools/Debugger/How_to/Use_a_source_map\">CLI 生成的源码映射</a>在调试时非常有用。请向上浏览调用栈，直到找到错误中所显示的、值已更改的模板表达式。</p>\n<p data-ng_translator_product=\"100\" data-ng_translator_ref_id=\"9fxi13hpzcnuuh6t9urf807uz\">运行变更检测后，请确保模板中的绑定没有更改。这通常意味着需要针对你的用例进行重构以使用正确的<a href=\"guide/lifecycle-hooks\">组件生命周期钩子</a>。如果此问题存在于 <code>ngAfterViewInit</code> 中，建议的解决方案是使用构造函数或 <code>ngOnInit</code> 来设置初始值，或者使用 <code>ngAfterContentInit</code> 做其他值的绑定。</p>\n<p data-ng_translator_product=\"100\" data-ng_translator_ref_id=\"ao4v4ol2u9g8x09rbnrrb0x9u\">如果要绑定到视图中的方法，请确保调用不会更新模板中的任何其他绑定。</p>\n<p data-ng_translator_product=\"100\" data-ng_translator_ref_id=\"kz43k2ue873yqgttkht7ro46\">在<a href=\"https://indepth.dev/posts/1001/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error\">“你需要了解的关于 “ExpressionChangedAfterItHasBeenCheckedError” 错误的一切”</a>中学习为什么该解决方案更合适，以及在 <a href=\"https://blog.angular-university.io/angular-debugging\">“Angular 调试：检查后表达式已更改”的简单说明（和修复）</a>中了解为什么这样做会有用。</p>\n<!-- links -->\n<!-- external links -->\n<!-- end links -->\n\n </div>\n \n</div>\n\n<!-- links to this doc:\n - errors\n - guide/deployment\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/docs/Tools/Debugger/How_to/Use_a_source_map\n - https://indepth.dev/posts/1001/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error\n-->"}
0 commit comments