时间戳

首页 > 解决方案 > 树形面板生成 ExpressionChangedAfterItHasBeenCheckedError 的虚拟滚动官方示例

angular - 树形面板生成 ExpressionChangedAfterItHasBeenCheckedError 的虚拟滚动官方示例

问题描述

我正在尝试让虚拟滚动为 TreeTable 工作，并且在按照我ExpressionChangedAfterItHasBeenCheckedError为我的数据展开任何节点时得到的官方示例之后。

当尝试使用 Stackblitz 进行官方演示时，我看到这里也产生了错误，primeng v9 和 v10 最新的演示示例都发生了这种情况。

我注意到这里也提出了一个 GitHub 问题 - https://github.com/primefaces/primeng/issues/8886但已关闭并引用了一种解决方法来ChangeDetectorRef手动添加 a 并触发更改检测周期。

我用官方的 stackblitz 演示（https://stackblitz.com/edit/primeng-treetablescroll-demo?file=src%2Fapp%2Fapp.component.ts）尝试了这个解决方案

setTimeout(() => {
    this.virtualFiles = Array.from({length: 1000}).map((_,i) => this.createNode(i, 100));
    this.cd.detectChanges();
}, 2000);

但这没有区别，仍然会产生错误，也许我执行不正确？

要复制此问题，您只需展开虚拟滚动示例中显示的节点之一。

我对primeng 9的解决方案\解决方法特别感兴趣

标签： angularprimengprimeng-treetable

解决方案

更新：

您可以尝试一些解决方法 -

选项1

将 virtualRowHeight 更改为 auto - [virtualRowHeight]="auto"。但这确实会影响展开/折叠切换的性能。

选项 2

在您的组件上使用ChangeDetectionStrategy.OnPush策略。但要小心它的副作用（阅读本文以了解它是如何工作的）。请参阅此 stackBlitz。

原始答案：

此问题已在版本中修复10.0.3。如果您好奇，请查看修复此问题的提交。

另外，查看这个分叉的 stackBlitz。它无需任何解决方法即可工作。

推荐阅读