ExpressionChangedAfterItHasBeenCheckedError解決方法

Question

我正在實現以下* ngIf。 我知道我不應該從* ngIf內部調用函數，但需要使用它來進行破解：

<div *ngIf="!ddlAuthorsSelect2Bound && wireUpSelect2()"></div>

無論如何，以下實現可以正常工作：

<div *ngIf="wireUpSelect2()"></div>

但是，由於某種原因，該* ngIf被多次調用。 因此，我在第一個代碼示例中添加了其他成員變量檢查，以防止進行其他函數調用。 這也按預期工作，但是ng2將以下錯誤寫入控制台：

Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'true'. Current value: 'false'.

您知道我可以抑制此錯誤的方法嗎？

Answer 1

快速而骯臟的解決方法是將其放入您的組件中： public ngDoCheck(): void { this.cdRef.detectChanges(); } public ngDoCheck(): void { this.cdRef.detectChanges(); } 。

確保導入： import {... , ChangeDetectorRef} from '@angular/core';

並將其包含在構造函數中： constructor(..., private cdRef:ChangeDetectorRef) {...}

這是@angular 4.2.x的常見問題。 無論是否是最佳實踐，該解決方法都將比添加一項生命周期檢查更為繁重。 如果我沒記錯的話，那么您就不必為4.3.x執行此操作。

Answer 2

首先避免在* ngIf wireUpSelect2（）中使用函數

Expression has changed after it was checked. Previous value: 'true'. Current value: 'false'. ，您的err Expression has changed after it was checked. Previous value: 'true'. Current value: 'false'.的原因Expression has changed after it was checked. Previous value: 'true'. Current value: 'false'. Expression has changed after it was checked. Previous value: 'true'. Current value: 'false'. 模板解析按順序進行。 如果在html的后續行中更改了boolean !ddlAuthorsSelect2Bound ，而您在html的頂部調用了此布爾值，則會出現此錯誤。