ExpressionChangedAfterItHasBeenCheck使用角度组件时出错

Question

我在Angular应用中创建了一个日期选择器组件。当我在* ngIf中使用它时，我得到错误ExpressionChangedAfterItHasBeenCheck。 让我，我使用两个组件P和C. P作为父输入字段。

<INPUT [p]=" '' ">

作为子下拉列表的C在INPUT之后附加。

<DIV>
// drop-down code
</DIV>

当在* ngIf中动态创建P时，我得到了这样的错误：ExpressionChangedAfterItHasBeenCheck。

Answer 1

正在运行的Angular应用程序是一个组件树。在更改检测期间，Angular会对每个组件执行检查，其中包括按指定顺序执行的以下操作：

1. 更新所有子组件/指令的绑定属性
2. 在所有孩子身上调用ngOnInit，OnChanges和ngDoCheck生命周期挂钩 组件/指令
3. 更新当前组件的DOM
4. 运行子组件的更改检测
5. 为所有孩子调用ngAfterViewInit生命周期钩子 组件/指令

每次操作后，Angular会记住它用于执行操作的值。它们存储在组件视图的oldValues属性中。完成对所有组件Angular的检查后。

所以最后，我们需要让它与Angular同步并解决它我们使用setTimeout inside lifecycle hooks.

ngOnInit() {
    setTimeout(() => {
    // Your Code
    });
}
ngAfterViewInit() {
    setTimeout(() => {
    // Your Code
    });
}