-{"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://videos.angular.cn/O47uUnJjbJc.webm\" type=\"video/webm\">\n <source src=\"https://videos.angular.cn/O47uUnJjbJc.mp4\" type=\"video/mp4\">\n <track src=\"https://videos.angular.cn/O47uUnJjbJc.en.vtt\" label=\"English\" kind=\"subtitles\" srclang=\"en\">\n <track src=\"https://videos.angular.cn/O47uUnJjbJc.cn.vtt\" label=\"簡體中文\" kind=\"subtitles\" srclang=\"zh-CN\" default>\n <track src=\"https://videos.angular.cn/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