如何在 Angular 中创建嵌套表？答案

【问题标题】：How to create Nested Table in Angular?如何在 Angular 中创建嵌套表？
【发布时间】：2021-01-08 13:23:00
【问题描述】：

我正在使用数据数组创建一个动态表

let data = [{
  "criterialimitId": "3",
  "criteriaName": "Test",
  "criteriaId": "1",
  "criteria": "Max Wager",
  "type": "DAILY",
  "oprLimit": "2.5",
  "status": "1",
  "action": "SALE_HOLD",
  "plrLimitAllowed": "YES",
  "createdAt": "2020-09-22 13:30:02.0",
  "updatedAt": "2020-09-22 13:30:02.0",
  "attributes": [{
    "serviceId": "1",
    "serviceName": "Draw Game",
    "providers": [{
        "providerId": "1",
        "providerName": "IGT",
        "games": [{
            "gameId": "1",
            "gameName": "LOTTO"
          },
          {
            "gameId": "2",
            "gameName": "LOTTO2"
          }
        ]
      },
      {
        "providerId": "2",
        "providerName": "ABC",
        "games": [{
            "gameId": "2",
            "gameName": "AB1"
          },
          {
            "gameId": "23",
            "gameName": "AB2"
          }
        ]
      }
    ],
    "type": "DAILY",
    "status": "1",
    "createdAt": "2020-09-22 13:30:03.0",
    "updatedAt": "2020-09-22 13:30:03.0"
  }]
}]

console.log(data)

我想要一张这样的桌子：

但我得到这样的输出：我应该使用嵌套表吗？如何做到这一点？

这是我目前的代码。

....... ..................... ………………………………………………………………………………………… ...................... 我不知道还要解释什么。 @stackoverflow 不允许我发布我的问题，因为“看起来您的帖子主要是代码；请添加更多详细信息。”还需要什么详细信息？如果有人可以提供帮助，那将很有帮助。

<table style="table-layout: fixed;" class="table table-bordered">
  <thead>
    <tr>
      <th class="text-center align-middle">Service Name</th>
      <th class="text-center align-middle">Provider Name</th>
      <th class="text-center align-middle">Game Name</th>
    </tr>
  </thead>
  <tbody>
    <ng-container *ngFor="let attribute of data.attributes">
      <tr>
        <td>{{attribute.serviceName}}</td>
        <td>
          <tr *ngFor="let provider of attribute.providers">
            <td>
              {{provider.providerName}}
            </td>
          </tr>
        </td>
        <td>
          <tr  *ngFor="let provider of attribute.providers">
            <td *ngFor="let game of provider.games"> 
              {{game.gameName}} <br>
            </td>
          </tr>
        </td>
      </tr>
    </ng-container>
  </tbody>
</table>

【问题讨论】：

标签： html angular html-table

【解决方案1】：

我是这样解决的：

<table style="table-layout: fixed;" class="table table-bordered">
  <thead>
    <tr>
      <th class="text-center align-middle">{{'criteriaLimit.serviceName' | translate}}</th>
      <th class="text-center align-middle">{{'criteriaLimit.providerName' | translate}}</th>
      <th class="text-center align-middle">{{'criteriaLimit.gameName' | translate}}</th>
    </tr>
  </thead>
  <tbody>
    <ng-container *ngFor="let attribute of data.attributes; let i = index;"> 
      <ng-container *ngFor="let provider of attribute.providers; let j = index">
        <ng-container *ngFor="let game of provider.games; let k = index">
          <tr>
            <td class="text-center align-middle" *ngIf="j==0 && k==0" [attr.rowspan]="calculateSpan(i)">{{attribute.serviceName}}</td>
            <td class="text-center align-middle" *ngIf="k==0" [attr.rowspan]="provider.games.length">{{provider.providerName}}</td>
            <td class="text-center align-middle" >{{game.gameName}}</td>
          </tr>
        </ng-container>
      </ng-container>
    </ng-container>
  </tbody>
</table>

【讨论】：