我如何使用角树组件以编程方式将子代添加到父节点的子代中

Question

我在使用角树组件时遇到问题。我相信这个问题很简单，但我可以完全解决。我似乎无法将子节点添加到父节点的子节点中。那是根节点的孙子，依此类推。我想添加孙子等等，但是我仍然在努力添加孙子。如果有人在激光雷达系统上看到了积分UiTreeview。然后，您可以理解。这是示例https://www.lidorsystems.com/support/articles/angular/treeview/treeview-add-items-dynamically/的链接我正在尝试做的事情。环顾整个互联网，我发现这并不是一件容易的事，但是我使用的是角树组件，我只想知道如何通过单击按钮添加孩子。我已成功将子级添加到根节点，但仅添加了第一个根。我想知道的是如何在我想要的任何节点上添加子节点，以及可能如何将其删除。我相信自己可以自己负责编辑部分。如果lidorsystems是免费的，我会使用它。如果您对如何执行此操作有任何建议，请提供帮助。

这是我用来添加根节点的代码

    createRootNode() {
  this.mainQuestion = this.surveyForm.get('firstQuestion').value;
  this.nodes.push({name: this.mainQuestion, children: []});
  console.log(this.nodes);
  this.tree.treeModel.update();
  }

而这是第一个根的子节点的那个。虽然都是常规的：

    addNode(tree) {
    this.nodes[0].children.push({

      name: 'a new child',
      children: []

    });
    tree.treeModel.update();
  }

这是html：

  <div >
<tree-root class="tree" #tree [nodes]="nodes"  [focused]="true" [options]="options">

  <ng-template #treeNodeTemplate let-node>
    <span title="{{node.data.name}}">{{ node.data.name }}</span>
    <span class="pull-right">{{ childrenCount(node) }}</span>
    <button (click)="addNode(tree)">add</button>
  </ng-template>
</tree-root>

Answer 1

对于任何想要使用角树组件创建树视图的人，这是从树中添加和删除节点的基本过程：

添加-Ts文件：

    addNode(parent: TreeNode) {
   this.tree.treeModel.setFocus(true);
  const value = {
    name: 'a new child',
    children: []
  };
  if (parent) {
  parent.data.children.push(value);
  }
   this.tree.treeModel.update();
  }

HTML文件：

  <div >
<tree-root class="tree" #tree [nodes]="nodes"  [focused]="true" [options]="options">

  <ng-template #treeNodeTemplate let-node>
    <span title="{{node.data.name}}">{{ node.data.name }}</span>
    <span class="pull-right">{{ childrenCount(node) }}</span>
    <button  mat-icon-button (click)="addNode(node)" aria-label="Icon-button with an add icon">
        <mat-icon>add</mat-icon>
      </button>
      <button  mat-icon-button (click)="removeNode(node)" aria-label="Icon-button with a delete icon">
        <mat-icon>close</mat-icon>
      </button>
  </ng-template>
</tree-root>

用于删除节点：

    removeNode(node: TreeNode): void {
    if (node.parent != null) {
        node.parent.data.children.splice(node.parent.data.children.indexOf(node.data), 1);
        this.tree.treeModel.update();
    }
}

上面删除节点的HTML。如果您对上面编写的儿童计数函数感到好奇，请使用以下代码：

   childrenCount(node: TreeNode): string {
    return node && node.children ? `(${node.children.length})` : '';
  }

您也可以转到https://github.com/500tech/angular-tree-component/issues/432浏览与添加和删除节点有关的问题。尽管社区不是很大或不是很活跃，但是大多数解决方案都写在这里。我希望这有帮助。如果我找到编辑解决方案，我也会在此处发布。