如何在不重新渲染的情况下更新我的 mat-tree？

Question

我的 mat 树重绘使用 BehaviorSubject 在数据源数据更改时初始化自己。

我正在使用一个 observable，我不时更新表单以更新由 FlatTreeControl 生成的树数据。

该代码非常基本且易于理解，因此我没有看到问题。

我尝试在 stackBlitz 上使用简化版的 angular flat tree 示例：https ://stackblitz.com/angular/rlqvokgplrko ? file = app%2Ftree-checklist-example.ts

这是我的版本：https : //stackblitz.com/edit/create-iq2meg

我期望的是，就像在官方 mat-tree 示例中一样，数据是动态更新的，而不必每次都重新绘制整个树并使其折叠在我身上。

Answer 1

我们可以使用@danielkuhlwein在GitHub 中提到的解决方法

在进行任何重新渲染之前，将展开的节点保存到列表中：

saveExpandedNodes() {
    this.expandedNodes = new Array<BulletFlatNode>();
    this.treeControl.dataNodes.forEach(node => {
        if (node.expandable && this.treeControl.isExpanded(node)) {
            this.expandedNodes.push(node);
        }
    });
}

然后在重新渲染后恢复展开的节点：

restoreExpandedNodes() {
    this.expandedNodes.forEach(node => {
        this.treeControl.expand(this.treeControl.dataNodes.find(n => n.id === node.id));
    });
}