angular - 自定义数据结构为表

Question

我有一个关于树组件的问题。是否可以让我的树组件像一张桌子？这是我真正想要的：

以下是文档示例中的一些片段：

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展示了表格