html - 如何以 Angular 制作嵌套表结构？

Question

 {
    "SolutionsDetail": [
        {
            "SolutionId": 658,
            "name": "dk",
            "id": 1568377327000,
            "groups": [
                {
                    "GroupId": 1,
                    "requestDetails": [
                        {
                            "ReqId": 2331,

                        },

                    ]
                }

            ]
        }
    ]
}

从我这边尝试:

<ng-container *ngFor="let groupRowData of groups ;let $index=index"> 
<tr>
   <td> {{ grouprowdata.GroupId }}</td>
   <td>
    <tr *ngfor="let requestDetail of groupRowdata.RequestDetails"> {{ requestDetail.reqId}}</tr>
   </td>
</tr>

第一列将包含我的组，第二列将包含基于组的我的请求详细信息(根据 json 结构)。有人可以帮我吗？

Answer 1

为您的左侧列创建一个 rowspan，其中包含 requestDetails 中的项目。

现在棘手的部分是表的第一行将有 1 个 group-id 和 1 个 requestDetail，但组的下一行将只有一个 td，因为左列由 rowspan 填充，因此循环 requestDetails

这种方法将使所有数据成为单个表的一部分，因此缩进和调整大小变得更容易

<ng-container *ngFor="let groupRowData of data.SolutionsDetail[0].groups;"> 
  <ng-container *ngFor="let requestDetailData of groupRowData.requestDetails; let $index = index">
    <tr>
      <td *ngIf="$index===0;" [attr.rowspan]="groupRowData.requestDetails.length">Group {{ groupRowData.GroupId }}</td>
      <td>
        {{ requestDetailData.ReqId}}
      </td>
    </tr>
  </ng-container>
</ng-container>

Blitz :https://stackblitz.com/edit/angular-hp9gcu