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

为左侧列创建一个行跨度，其中包含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>

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

Answer 2

使用colspan将该列跨到ReqId的长度

尝试一下：

import { Component } from "@angular/core";

@Component({...})
export class AppComponent {
  response = {
    SolutionsDetail: [
      {
        SolutionId: 658,
        name: "Group 1",
        id: 1568377327000,
        groups: [
          {
            GroupId: 1,
            requestDetails: [
              { ReqId: 2331 },
              { ReqId: 2331 },
              { ReqId: 2331 },
              { ReqId: 2331 },
            ]
          },
          {
            GroupId: 1,
            requestDetails: [
              { ReqId: 2331 },
              { ReqId: 2331 },
              { ReqId: 2331 },
              { ReqId: 2331 },
            ]
          }
        ]
      }
    ]
  };
}

在您的模板中：

<table border="1">
    <tr *ngFor="let group of response.SolutionsDetail[0].groups">
        <td colspan="group.requestDetails.length + 1">
            Group {{ group.GroupId }}
        </td>
        <td>
            <tr *ngFor="let det of group.requestDetails">
                {{ det.ReqId }}
            </tr>
        </td>
    </tr>
</table>

Answer 3

如果您需要使用HTML表，则可以为此添加多个div标签，

<table>
    <tbody >
      <tr  *ngFor="let group of SolutionsDetail.groups">
        <td>{{group.GroupId}}</td>
        <td>
            <div *ngFor="let requestDetail of SolutionsDetail.requestDetails">
              <div class="class1">{{requestDetail.ReqId}}</div>
              <div class="class2">{{requestDetail.ReqId}}</div>
              <div class="class3">{{requestDetail.ReqId}}</div>
            </div>
        </td>
      </tr>
    </tbody>
 </table>

但是我的建议，您可以使用Bootstrap或自己的样式来设计使用和样式

例如

  <div >
    <div class= 'col-md-12'  *ngFor="let group of SolutionsDetail.groups">
        <div class='col-md-4'>{{group.GroupId}}</div>
        <div class = "col-md-8"  *ngFor="let requestDetail of SolutionsDetail.requestDetails">
             <div id="span1" class="col-md-4">{{requestDetail.ReqId}}</div>
             <div id="span2"  class="col-md-4">{{requestDetail.ReqId}}</div>
             <div id="span3"  class="col-md-4">{{requestDetail.ReqId}}</div>
        </div>
     </div>
</div>

如何使嵌套表结构成角形？

3 个答案: