Настройка структуры данных в виде таблицы

Question

У меня вопрос о дереве. Можно ли сделать компонент дерева похожим на таблицу? Вот чего я хочу:

ht tps:https://stackru.com/images/dbe3c74792d245e8fd74e30c79fd1c1c533f9246.png

Вот отрывок из примера документации:

nodes = [
    {
      id: 1,
      name: "Санхүү",
      children: [{ id: 2, name: "child1" }, { id: 3, name: "child2" }]
    },
    {
      id: 4,
      name: "Санхүүгийн бус",
      children: [
        { id: 5, name: "Данс нээх харилцах" },
        {
          id: 6,
          name: "Карт захиалах",
          children: [{ id: 7, name: "subsub" }]
        }
      ]
    }
  ];

Answer 1

Я думаю, что лучший подход - создать таблицу с узлами. Для этого мы используем переменную "данные" и рекурсивную функцию.

data:any[]=[]
  getData(data:any[],index,nodes)
  {
    nodes.forEach(x=>{
      x.level=index
      data.push(x)
      if (x.children && x.open)
        this.getData(data,index+1,x.children)
    })
    return data;
  }

Посмотрите, что в "данных" у нас есть узлы и "уровень", чтобы мы могли узнать, на каком уровне находится наш узел. Если у нас есть.html как

<table>
  <tr *ngFor="let item of data">
    <td [style.padding-left]="(2*item.level)+'rem'">
      <button *ngIf="item.children" (click)="click(item)">+</button>
      {{item.name}}</td>
  </tr>
</table>

Когда мы делаем щелчок, мы вызываем функцию

click(item)
  {
    item.open=!item.open;
    this.data=[];
    this.getData(this.data,0,this.nodes)
  }

На самом деле это уродливый пример, но этот stackblitz показывает таблицу