如何在Angular中基于Web API返回的JSON数据按日期生成多份HTML表格

第一步：修改 search.component.ts #

你现有代码里的分组结果separate是局部变量，模板无法访问，另外要先明确你的接口返回结构：

• 若接口返回的就是你给出的按日期分组的对象结构，不需要手动写分组逻辑，直接赋值即可
• 若接口实际返回的是一维任务数组，再保留你写的分组逻辑，将结果挂载到组件全局属性

修改后的代码示例：

// 先在组件类中声明全局属性，用来存储分组后的数据
groupedReports: {[date: string]: any[]} = {};

searchdata() {  
    this._service.searchdata(this.search).subscribe((res: any) => {  
        // 情况1：接口返回的已经是按日期分组的对象（和你给出的示例结构一致）
        this.groupedReports = res;

        // 情况2：如果接口实际返回的是一维任务数组，用以下逻辑替换上面的赋值
        // const separate = {};
        // for (const row of res) {
        //   if(separate.hasOwnProperty(row.report_date)){
        //     separate[row.report_date].push(row);
        //   } else {
        //     separate[row.report_date] = [row];
        //   }
        // }
        // this.groupedReports = separate;
    })  
}

第二步：修改 search.component.html #

外层增加*ngFor循环所有日期分组，每个分组渲染一个独立表格，每个表格内循环当前日期的任务数据：

<!-- 外层循环每个日期分组，keyvalue管道用来遍历对象的键值对 -->
<div *ngFor="let dateGroup of groupedReports | keyvalue" class="mb-4">
  <!-- 可选：显示当前表格对应的日期 -->
  <h5>{{dateGroup.key}}</h5>
  <table id="excel-table-{{dateGroup.key}}" class="table table-striped">
    <thead>
      <tr>
        <th>Project Name</th>
        <th>Project ID</th>
        <th>Activity</th>
        <th>Start Time</th>
        <th>End Time</th>
        <th>Billable Hours</th>
        <th>Date</th>
      </tr>
    </thead>
    <tbody>
      <!-- 循环当前日期对应的所有任务 -->
      <tr *ngFor="let report of dateGroup.value">
        <td>{{report.task_website}}</td>
        <td>{{report.task_id}}</td>
        <td>{{report.task_desc}}</td>
        <td>{{report.start_time}}</td>
        <td>{{report.end_time}}</td>
        <td>{{report.task_time}}</td>
        <td>{{report.report_date}}</td>
      </tr>
    </tbody>
  </table>
</div>

调整说明 #

• Angular的keyvalue管道可以将对象转为键值对数组，方便遍历对象属性，这里dateGroup.key就是日期，dateGroup.value就是对应日期的任务列表
• 每个表格的id加了日期后缀避免重复，也可以根据需求去掉
• 外层div的mb-4是Bootstrap的下边距类，用来分隔多个表格，你可以根据自己的样式需求调整

内容的提问来源于stack exchange，提问作者krtk74