-1

我正在尝试让虚拟滚动为 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的解决方案\解决方法特别感兴趣

4

2 回答 2

1

更新：

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

选项1

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

选项 2

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

原始答案：

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

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

于 2020-10-22T16:42:04.460 回答
1

正如 Akash 所提到的，问题已在更高版本的库中得到修复，您可以检查您提到的BUG附带的更改，并且也可以在您的代码中应用修复：

app.component.html

...
<p-treeTable #treeTable [value]="virtualFiles" [columns]="cols" [scrollable]="true
  [rows]="100">
  ...
</p-treeTable>

app.component.ts

...
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements AfterViewInit, OnDestroy { 
    @ViewChild(TreeTable)
    private virtualTable: TreeTable;

    virtualFiles: TreeNode[];
    cols: any[];
  
    private virtualTableSub: Subscription;

    constructor(
        private nodeService: NodeService,
        private primengConfig: PrimeNGConfig,
        private cdr: ChangeDetectorRef
    ) { }
    ...
    ngAfterViewInit() {
      this.virtualTable.tableService.uiUpdateSource$.subscribe(() => {
        if (this.virtualTable.virtualScroll) {
          this.cdr.detectChanges();
        }
      })
    }

    ngOnDestroy() {
      this.virtualTableSub?.unsubscribe();
    }
    ...
}

看看这个 stackblitz。

于 2020-10-24T06:47:00.177 回答