如何以角度制作嵌套表结构? [英] How to make nested table structure in angular?

问题描述

<代码> {解决方案详细信息":[{解决方案ID":658，"name": "dk",身份证":1568377327000，组":[{GroupId":1，请求详细信息":[{请求编号":2331，},]}]}]}

从我这边尝试过:

<tr><td>{{ grouprowdata.GroupId }}</td><td><tr *ngfor="let requestDetail of groupRowdata.RequestDetails">{{requestDetail.reqId}}</tr></td></tr>

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

解决方案

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

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

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

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

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

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

                        },

                    ]
                }

            ]
        }
    ]
}

tried from my side :

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

First column will have my group and second will have my request details based on group(as per json structure). can someone help me on this?

解决方案

For your left side columns create a rowspan with items in requestDetails.

Now the tricky part is that first row of table will have 1 group-id and 1 requestDetail, but the next rows of the groups will only have one td since the left column is populated by rowspan so loop the requestDetails

This approach will make all data be a part of a single table so indentation and resizing becomes easier

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

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

这篇关于如何以角度制作嵌套表结构?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！