Angular 2+ ExpressionChangedAfterItHasBeenCheckedError：检查后表达式已更改

Question

我的应用具有父子关系。在父级中，我包含了子级的以下选择器：

<app-chip-list [ocoChipItems]="getChipItems(row['status'])"></app-chip-list>

请注意，要传递给子级的数据必须通过父级中的 getChipItems() 方法中的逻辑派生。

虽然该应用程序似乎可以按预期工作，但它在控制台中抛出“ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked”。

我通过在父组件的声明中添加以下内容来解决此问题：

changeDetection: ChangeDetectionStrategy.OnPush

我不完全明白这是做什么的。所以，我不确定这是否是合适的解决方案。

感谢您的反馈。

Answer 1

在我的应用程序中加载表格时，会在单元格上调用一个函数来确定其值。这会导致值从 null 更改为其他值，从而导致问题。因此，我强制在从表中加载数据后进行更改检测。这是通过订阅表的数据源上的一个属性来完成的，当数据加载到表中时该属性会发出一个事件。

this.dataSource.loading$.subscribe(() => {
  this.cdr.detectChanges();
});

我将此代码添加到 ngOnInit() 方法的末尾。