Question

我正在实施以下* 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'.

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

Answer 1

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

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

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

对于@angular 4.2.x，

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

Answer 2

首先避免使用* ngIf wireUpSelect2（）

中的函数

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

ExpressionChangedAfterItHasBeenCheckedError解决方法

2 个答案: