如何更新mat-tree且避免其重新渲染与自动折叠？

我之前也碰到过类似的坑！核心问题其实是你每次更新数据时，要么重新创建了数据源/树控件实例，要么没保留节点的展开状态，导致树完全重置。下面给你一步步拆解解决方案：

1. 先避免「全量替换+重新实例化」的错误 #

首先检查这两个常见误区：

• 不要每次更新数据时都new一个新的FlatTreeDataSource或FlatTreeControl，要在组件初始化时创建一次，之后复用这个实例
• 不要直接替换整个数据数组后不管，要先记录当前展开的节点，更新后再恢复状态

2. 跟踪并恢复节点展开状态 #

在组件里加一个集合来保存当前展开的节点ID，监听树的展开/折叠事件更新这个集合：

// 保存当前展开的节点ID
expandedNodeIds = new Set<string>();

// 绑定到mat-tree的(expanded)事件
onNodeExpanded(node: TodoItemFlatNode) {
  this.expandedNodeIds.add(node.id);
}

// 绑定到mat-tree的(collapsed)事件
onNodeCollapsed(node: TodoItemFlatNode) {
  this.expandedNodeIds.delete(node.id);
}

3. 正确更新数据并恢复展开状态 #

当你需要更新树数据时，按这个流程来：

updateTreeData(newData: TodoItemNode[]) {
  // 第一步：先把当前展开的节点ID存下来
  const currentExpandedIds = Array.from(this.expandedNodeIds);
  
  // 第二步：更新数据源（注意是复用已有的dataSource实例，不是重新new）
  this.dataSource.data = newData;
  
  // 第三步：遍历之前的展开ID，重新展开对应节点
  currentExpandedIds.forEach(id => {
    const targetNode = this.treeControl.dataNodes.find(node => node.id === id);
    if (targetNode) {
      this.treeControl.expand(targetNode);
    }
  });
}

4. 优化BehaviorSubject的更新方式 #

如果是用Observable定期推送数据，尽量增量修改现有数据而不是全量替换，这样Angular的变更检测只会更新变化的节点，不会重绘整个树：

// 初始化BehaviorSubject
private treeData$ = new BehaviorSubject<TodoItemNode[]>(initialTreeData);

// 定期更新数据的示例
startPeriodicUpdate() {
  setInterval(() => {
    // 获取当前数据的副本
    const currentData = [...this.treeData$.value];
    // 找到要修改的节点并更新（比如修改名称或状态）
    const targetNode = currentData.find(n => n.id === "node-1");
    if (targetNode) {
      targetNode.name = `Updated at ${new Date().toLocaleTimeString()}`;
    }
    // 推送更新后的数组（用扩展运算符创建新数组触发变更检测）
    this.treeData$.next(currentData);
  }, 3000);
}

关键注意点 #

• 确保FlatTreeControl和FlatTreeDataSource在组件初始化时只创建一次，不要在更新数据时重新实例化
• 如果必须全量替换数据数组，一定要先记录展开状态再恢复
• 尽量用增量更新的方式修改数据，减少不必要的重绘

按这个方法修改后，你的Mat-Tree就能像官方示例那样，动态更新数据时只刷新变化的节点，同时保持之前的展开状态啦～

内容的提问来源于stack exchange，提问作者lolplayer101