用于数据表角度的API中的嵌套数组json

问题描述

我在角度上有问题，我有一个API返回嵌套数组。我想获取该数据以构建角度数据表。但是我尝试使用ngFor嵌套循环和其他方式，但是直到现在我仍无法获得结果

我拥有的API是这个

{
    "data": [
        {
            "attendances": [
                {
                    "employee": "08850046-WIDI TRI YUWONO","attendance_date": "2020-07-01","attendance_day": "WEDNESDAY","checkin_time": "-","checkin_location": "-","checkout_time": "-","checkout_location": "-","checkin_status": 0
                },{
                    "employee": "08850046-WIDI TRI YUWONO","attendance_date": "2020-07-02","attendance_day": "THURSDAY","checkin_status": 0
                }
            ]
        },{
            "attendances": [
                {
                    "employee": "93710016-MAYA SETYAWATI",{
                    "employee": "93710016-MAYA SETYAWATI","checkin_status": 0
                }
            ]
        }
    }
]

<div class="row">
  <div class="col-sm-12">
    <app-card cardTitle="{{ 'CHART_COMPONENT.attendance_history' | translate }}" cardClass="card-datatable" headerClass="text-center text-md-left" [hidHeader]="false" [options]="true" [loading]="loadtableEmployeeStaffReport">
      <div class="table-responsive pb-1">
        <table datatable [dtOptions]="dtOptions" class="table table-bordered table-hover" [dtTrigger]="dtTrigger">
          <thead class="thead-light">
            <tr>
              <th scope="col" style="padding-left: 10px">No.</th>
              <th scope="col" style="text-align:center">Employee</th>
            </tr>
          </thead>


          <tbody *ngIf="tableData?.length != 0;">
            <tr *ngFor="let data of tableData; let i = index;">
              <tr *ngFor="let col of data.attendances; let j = index;"></tr>
                <th scope="row" style="padding-left: 10px">{{ j+1 }}</th>
                <th scope="row" style="padding-left: 10px">{{ j+1 }}</th>
              </tr>
            </tr>
          </tbody>
          <tbody *ngIf="tableData?.length == 0 && !loadtableEmployeeStaffReport">
            <tr>
              <td colspan="7" class="no-data-available text-center">Data tidak ditemukan!</td>
              <td class="hidden"></td>
            </tr>
          </tbody>
          <tbody *ngIf="tableData?.length == 0 && loadtableEmployeeStaffReport">
            <tr>
              <td colspan="7" class="no-data-available text-center">Loading Data....</td>
              <td class="hidden"></td>
            </tr>
          </tbody>
        </table>
      </div>
    </app-card>
  </div>

this.chartService.getEmployeeReportStaff().subscribe(response => {
      setTimeout(() => { 
        this.tableData = response.data;
        this.dtTrigger.next(); 
        this.loadtableEmployeeStaffReport = false;
      },3000);
    }

请给我一些启发，以建立该数据表。我使用component.ts和.html进行查看。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）