Как сделать структуру вложенного стола в угловом?

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 идентификатор группы и 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

Если вам нужно использовать Html Table, вы можете добавить для этого тег Multiple 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 или Your Own Styling, используя стиль и стиль

например

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

Answer 3

Используйте colspan, чтобы охватить этот столбец до длины ReqIds

Попробуйте:

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>