Angular Material Tree加载时预勾选复选框的实现问题

我明白你遇到的问题——Angular Material Tree单独运行正常，但要在组件加载时基于已有ID列表预勾选节点，直接在ngOnInit调用todoLeafItemSelectionToggle没效果对吧？这大概率是因为树的扁平化节点还没生成，你调用toggle的时候目标节点根本还不存在，所以操作无效。

下面给你一套可行的解决方案，核心思路是等树节点完全初始化后，直接操作SelectionModel来选中目标节点，同时处理父子节点的联动状态：

步骤1：等待树节点初始化完成 #

不要在ngOnInit里处理预勾选，而是用ngAfterViewInit，或者等待flatNodes（你的扁平化节点列表）加载完成后再执行。比如用setTimeout确保DOM和树数据都初始化完毕：

import { AfterViewInit } from '@angular/core';

// 先让组件实现AfterViewInit
export class YourTreeComponent implements AfterViewInit {
  // ... 你的其他代码

  ngAfterViewInit() {
    // 用setTimeout确保树节点已经生成
    setTimeout(() => {
      this.initializeSelectedNodes();
    });
  }
}

步骤2：实现初始化选中的方法 #

编写一个方法，遍历你的选中ID列表，找到对应的树节点，然后通过SelectionModel的select方法选中，同时更新父节点的半选/全选状态：

private initializeSelectedNodes() {
  // 筛选出所有叶子节点（因为你的选中列表是叶子节点的ID）
  const leafNodes = this.flatNodes.filter(node => !node.expandable);

  this.selectedBoxes.forEach(pg => {
    // 匹配ID（注意类型要一致，这里转成字符串和你的节点item对应）
    const targetNode = leafNodes.find(node => node.item === pg.Product_Group_ID.toString());
    
    if (targetNode) {
      // 直接选中该节点
      this.todoSelection.select(targetNode);
      // 递归更新父节点的选中状态，确保父子联动正常
      this.updateParentSelection(targetNode);
    }
  });
}

// 更新父节点的选中状态
private updateParentSelection(node: TodoItemFlatNode) {
  let parent = this.getParentNode(node);
  while (parent) {
    const children = this.treeControl.getChildren(parent);
    const allSelected = children.every(child => this.todoSelection.isSelected(child));
    const noneSelected = children.every(child => !this.todoSelection.isSelected(child));

    if (allSelected) {
      this.todoSelection.select(parent);
    } else if (noneSelected) {
      this.todoSelection.deselect(parent);
    } else {
      // 半选状态，用partiallySelect方法标记
      this.todoSelection.partiallySelect(parent);
    }
    // 继续向上找父节点
    parent = this.getParentNode(parent);
  }
}

// 获取某个节点的父节点
private getParentNode(node: TodoItemFlatNode): TodoItemFlatNode | null {
  const currentLevel = node.level;
  if (currentLevel < 1) return null;

  // 找到当前节点所在层级的上一层节点范围
  const startIdx = this.treeControl.dataNodes.findIndex(n => n.level === currentLevel - 1);
  const endIdx = this.treeControl.dataNodes.findIndex(n => n.level === currentLevel);

  // 在父节点范围内查找包含当前节点的父节点
  for (let i = startIdx; i < endIdx; i++) {
    const candidate = this.treeControl.dataNodes[i];
    if (this.treeControl.getChildren(candidate).includes(node)) {
      return candidate;
    }
  }
  return null;
}

关键注意点 #

1. 节点存在性检查：必须确保flatNodes已经生成，否则找不到目标节点。如果你的树数据是异步获取的，要在数据返回后再调用initializeSelectedNodes。
2. 类型匹配：确保pg.Product_Group_ID.toString()和节点的item值完全一致，否则匹配失败。
3. 父子联动：手动选中子节点后，必须更新父节点的状态，否则父节点的复选框不会显示正确的半选/全选状态。

这种方法直接操作Material Tree的SelectionModel，比调用toggle更可靠，而且能确保父子节点的状态同步。

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