Javascript 如何打印带有表行子行的表行？

我正在寻找一种方法来打印从API接收的数据在一个使用Angular的表中。这张桌子有不同的折叠。折叠有几行，这些行同时有子行，其中一些有更多的子行

这是json文件：

{
  "collapse1": [
    {
      "name": "Soil",
      "budget": 12345,
      "child": [
        {
          "name": "Shopping",
          "budget": 12345
        },
        {
          "name": "Financial",
          "budget": 12345
        }
      ]
    },
    {
      "name": "Exterior",
      "budget": 12345,
      "child": [
        {
          "name": "Shopping",
          "budget": 12345
        },
        {
          "name": "Financial",
          "budget": 12345
        }
      ]
    },
    {
      "name": "Obra",
      "budget": 12345,
      "child": [
        {
          "name": "Shopping",
          "budget": 12345
        },
        {
          "name": "Financial",
          "budget": 12345
        }
      ]
    },
    {
      "name": "Professional honoraries",
      "budget": 12345,
      "child": [
        {
          "name": "Shopping",
          "budget": 12345
        },
        {
          "name": "Financial",
          "budget": 12345
        }
      ]
    }
  ],
  "collapse2":[
    {
      "name": "Soil",
      "budget": 12345,
      "child": [
        {
          "name": "Shopping",
          "budget": 12345
        },
        {
          "name": "Financial",
          "budget": 12345
        }
      ]
    },
    {
      "name": "Construction",
      "budget": 12345,
      "child": [
        {
          "name": "Data Center",
          "budget": 12345,
          "child": [
            {
              "name": "Development & Design",
              "budget": 12345,
              "child": [
                {
                  "name": "Raw Land",
                  "budget": 12345
                },
                {
                  "name": "Land Development",
                  "budget": 12345
                },
                {
                  "name": "Fiber Connection Upgrade",
                  "budget": 12345
                }
            
              ]
            }
        
          ]
      }
     
  ]
  }
  ]
}

我正在寻找一种解决方案，用json文件中的数据动态打印一个表。我试着在第一次崩溃时做以下操作，但没有成功

 <ng-container *ngFor="let collapse of collapse1">
            <tr class="group2 collapse" [collapse]="isCollapsedGroup2">
              <td>{{ collapse.name }}</td>
              <td></td>
              <td></td>
            </tr>

            <ng-container *ngFor="let child of collapse1.child">
              <tr class="tablerow-sub collapse" [collapse]="isCollapsedGroup2">
                <td>
                  <em class="pl-3">{{ child.name }}</em>
                </td>
                <td></td>
                <td></td>
              </tr>
            </ng-container>
 </ng-container>

{{collapse.name}
{{child.name}

您可以使用ng模板在模板中创建递归循环，如下所示

{{data.name}
{{data.budget}}

<ng-template #row let-data="collapse">
  <tr>
    <td>{{ data.name }}</td>
    <td>{{ data.budget }}</td>
  </tr>
  <ng-container *ngIf="data.child">
    <ng-container *ngFor="let child of data.child" [ngTemplateOutlet]="row"
      [ngTemplateOutletContext]="{ collapse: child }"></ng-container>
  </ng-container>
</ng-template>

<table>
  <ng-container *ngFor="let c of collapse">
    <ng-container [ngTemplateOutlet]="row" [ngTemplateOutletContext]="{ collapse: c }"></ng-container>
  </ng-container>
</table>