ExpressionChangedAfterItHasBeenCheckedError解决方法

时间:2017-08-09 18:03:32

标签: javascript angular typescript

我正在实施以下* ngIf。我知道我不应该在* ngIf中从技术上调用一个函数,但它是黑客所需要的:

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

无论如何,以下实现工作正常:

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

然而,由于某种原因,这个* ngIf被多次调用。所以我在第一个代码示例中添加了附加成员变量check以防止附加函数调用。这也按预期工作,但ng2将以下错误写入控制台:

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

你知道我可以抑制这个错误的方法吗?

2 个答案:

答案 0 :(得分:1)

快速而肮脏的解决方法是将其放入您的组件中:public ngDoCheck(): void { this.cdRef.detectChanges(); }

确保导入:import {... , ChangeDetectorRef} from '@angular/core';

并将其包含在构造函数中:constructor(..., private cdRef:ChangeDetectorRef) {...}

对于@angular 4.2.x,

Thiscommon问题。无论是否是最佳实践,解决方法将比添加一个生命周期检查更加繁重。如果我没弄错的话,你不应该为4.3.x这样做。

答案 1 :(得分:0)

首先避免使用* ngIf wireUpSelect2()

中的函数

您的错误Expression has changed after it was checked. Previous value: 'true'. Current value: 'false'.的原因是模板解析按顺序进行。如果在html的后续行中更改了布尔!ddlAuthorsSelect2Bound,并且您在html的顶部调用此布尔值,则会出现此错误。