我现在有三种类型的数据分别是我提交的 、我审批的、待审批的 他们分别对应着三种后端查询接口 现在我要在前端一个页面内 的三个表单中分别显示他们的分页数据 前端angular代码应该怎么写 loadAll(): void { this.approvalRecordService.queryAuditing().subscribe((res: HttpResponse<IApprovalRecord[]>) => { this.auditingApprovalRecords = res.body ?? []; }); this.approvalRecordService.queryCreated().subscribe((res: HttpResponse<IApprovalRecord[]>) => { this.createdApprovalRecords = res.body ?? []; }); this.approvalRecordService.queryAudited().subscribe((res: HttpResponse<IApprovalRecord[]>) => { this.auditedApprovalRecords = res.body ?? []; }); }

你可以使用 Angular 中的 HttpClient 发起 HTTP 请求来获取数据，并在模板文件中使用 ngFor 指令进行遍历展示。以下是一个简单的示例代码：

在组件中：

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-approval-records',
  templateUrl: './approval-records.component.html',
  styleUrls: ['./approval-records.component.css']
})
export class ApprovalRecordsComponent implements OnInit {
  auditingApprovalRecords: IApprovalRecord[];
  createdApprovalRecords: IApprovalRecord[];
  auditedApprovalRecords: IApprovalRecord[];

  constructor(private http: HttpClient) { }

  ngOnInit(): void {
    this.loadAll();
  }

  loadAll(): void {
    this.http.get<IApprovalRecord[]>('/api/approval-records/auditing').subscribe(res => {
      this.auditingApprovalRecords = res;
    });
    this.http.get<IApprovalRecord[]>('/api/approval-records/created').subscribe(res => {
      this.createdApprovalRecords = res;
    });
    this.http.get<IApprovalRecord[]>('/api/approval-records/audited').subscribe(res => {
      this.auditedApprovalRecords = res;
    });
  }
}

在模板文件中：

<h2>Auditing Approval Records</h2>
<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let record of auditingApprovalRecords">
      <td>{{record.id}}</td>
      <td>{{record.name}}</td>
      <td>{{record.status}}</td>
    </tr>
  </tbody>
</table>

<h2>Created Approval Records</h2>
<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let record of createdApprovalRecords">
      <td>{{record.id}}</td>
      <td>{{record.name}}</td>
      <td>{{record.status}}</td>
    </tr>
  </tbody>
</table>

<h2>Audited Approval Records</h2>
<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let record of auditedApprovalRecords">
      <td>{{record.id}}</td>
      <td>{{record.name}}</td>
      <td>{{record.status}}</td>
    </tr>
  </tbody>
</table>

这里的实例中，我们在组件的 ngOnInit 方法中调用了 loadAll 方法来获取数据，然后分别将数据赋值给 auditingApprovalRecords、createdApprovalRecords 和 auditedApprovalRecords 数组中。接着在模板文件中使用 ngFor 指令来遍历这些数组，展示数据。

请注意，这里的代码只是一个示例，你需要根据自己的实际情况进行修改。例如，你需要根据后端接口的返回值定义 IApprovalRecord 接口。