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的顶部调用了此布尔值，则会出现此错误。