javascript - 如何在Angular中打印带有子表行的表行？

Question

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

这是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>

标签： javascripthtmlangulartypescript

Answer 1

You can use ng-template to have a recursive loop in the template like this https://stackblitz.com/edit/angular-playground-excmau?file=app%2Fapp.component.html

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