Как программно добавить дочерние элементы к дочерним узлам родительского узла с помощью компонента Angular Tree

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>
</div>

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, чтобы просмотреть проблемы, связанные с добавлением и удалением узлов. Большинство решений написано там, хотя сообщество не очень большое или очень активное. Надеюсь, это поможет. Если я найду решение для редактирования, я также опубликую его здесь.