如何更新mat-tree以实现为叶子节点添加子节点（将叶子转父节点）

我明白你遇到的问题了——官方的复选框Tree示例确实默认只给有子节点的父节点提供添加功能，但其实只要调整几个关键地方，就能让叶子节点也支持添加子节点。下面是具体的实现步骤：

1. 调整节点可操作的判断逻辑 #

首先，我们要修改判断节点是否能添加子节点（或是否显示添加按钮）的逻辑。官方示例里的hasChild方法通常是检查节点是否为非叶子节点，但叶子节点初始没有children属性，所以我们需要确保添加按钮能显示在所有节点上：

// 保留hasChild用于展开逻辑，单独控制添加按钮的显示逻辑
hasChild = (_: number, node: TodoItemFlatNode) => !node.isLeaf;

2. 更新模板，让叶子节点显示添加按钮 #

在Tree的模板中，原来可能只有父节点模板才会渲染添加按钮，现在要调整模板，让所有节点（包括叶子节点）都能显示添加按钮：

<!-- 叶子节点模板 -->
<mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
  <li class="mat-tree-node">
    <button mat-icon-button disabled></button>
    <mat-checkbox class="checklist-leaf-node"
                  [checked]="checklistSelection.isSelected(node)"
                  (change)="todoItemSelectionToggle(node)">{{node.item}}</mat-checkbox>
    <!-- 给叶子节点也添加添加按钮 -->
    <button mat-icon-button (click)="addNode(node)">
      <mat-icon>add</mat-icon>
    </button>
  </li>
</mat-tree-node>

<!-- 父节点模板（确保添加按钮逻辑一致） -->
<mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodeToggle>
  <li class="mat-tree-node">
    <button mat-icon-button matTreeNodeToggle
            [attr.aria-label]="'Toggle ' + node.item">
      <mat-icon class="mat-icon-rtl-mirror">
        {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
      </mat-icon>
    </button>
    <mat-checkbox [checked]="descendantsAllSelected(node)"
                  [indeterminate]="descendantsPartiallySelected(node)"
                  (change)="todoItemSelectionToggle(node)">{{node.item}}</mat-checkbox>
    <button mat-icon-button (click)="addNode(node)">
      <mat-icon>add</mat-icon>
    </button>
  </li>
  <ul [class.example-tree-invisible]="!treeControl.isExpanded(node)">
    <ng-container matTreeNodeOutlet></ng-container>
  </ul>
</mat-tree-node>

3. 实现通用的添加子节点方法 #

在组件类里，修改addNode方法，让它能处理叶子节点的情况——给叶子节点初始化children数组，并将其标记为非叶子节点：

addNode(node: TodoItemFlatNode) {
  // 获取对应的原始数据节点（从TreeControl中获取）
  const parentOriginalNode = this.treeControl.getNode(node);
  if (!parentOriginalNode) return;

  // 如果是叶子节点，先初始化children数组，并更新flat节点的isLeaf状态
  if (!parentOriginalNode.children) {
    parentOriginalNode.children = [];
    node.isLeaf = false;
  }

  // 创建新的子节点数据
  const newChildItem = { 
    item: `New Subitem ${parentOriginalNode.children.length + 1}`,
    children: [] // 新节点默认是叶子节点
  };
  parentOriginalNode.children.push(newChildItem);

  // 刷新Tree的数据源，触发视图更新
  this.dataSource.data = [...this.dataSource.data];
  // 自动展开刚添加子节点的父节点，方便查看
  this.treeControl.expand(node);
}

4. 验证效果 #

完成以上修改后，点击任何节点（包括原来的叶子节点）的添加按钮，都会给该节点创建一个新的子节点，同时原来的叶子节点会自动变成可展开的父节点，展开后就能看到新添加的子节点了。

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