angular - 如何更新 mat-tree 以处理将子节点添加到叶节点（将叶节点转换为父节点）

Question

我正在使用带有复选框的Angular Material6 树组件。

在原始示例中，我们只能将新子节点添加到父节点。如果我想向叶节点添加一个新子节点怎么办。

Answer 1

我通过向 insertItem 和 addNewItem 函数添加几行来解决这个问题。stackblitz前叉

     addNewItem(node: TodoItemFlatNode) {
        const parentNode = this.flatNodeMap.get(node);
        /*** this block will be used to determine wither we should expand the subtree or not.      **/ 
        let isParentHasChildren: boolean = false;
        if (parentNode.children)
          isParentHasChildren = true;
        /** end of the block **/
        this.database.insertItem(parentNode!, '');
        // expand the subtree only if the parent has children (parent is not a leaf node)
        if (isParentHasChildren)
          this.treeControl.expand(node);
      }

      insertItem(parent: TodoItemNode, name: string) {
        const child = <TodoItemNode>{ item: name };
        if (parent.children) { // parent already has children
          parent.children.push(child);
          this.dataChange.next(this.data);
        }
        else { // if parent is a leaf node
          parent.children = [];
          parent.children.push(child);
          this.dataChange.next(this.data);
        }
      }

Answer 2

虽然这是一个老问题，但我会为那些再次问该怎么做的人回答。

首先，将 + 按钮添加到叶节点：

<button mat-icon-button (click)="addNewItem(node)"><mat-icon>add</mat-icon></button>

然后，使用一个小技巧来刷新树。

refreshTree() {
    let _data = this.dataSource.data;
    this.dataSource.data = [];
    this.dataSource.data = _data;
  }

我在数据更改订阅中添加了对 refreshTree 函数的调用：

_database.dataChange.subscribe(data => {
        this.dataSource.data = data;
        this.refreshTree();
      });