我现在有三种类型的数据分别是我提交的 、我审批的、待审批的 他们分别对应着三种后端查询接口 现在我要在前端一个页面内 的三个表单中分别显示他们的分页数据 前端angular代码应该怎么写

可以使用Angular的HttpClient模块来获取后端数据，然后在前端页面中使用ngFor指令来渲染表格。

首先，在你的component中定义三个空数组，分别对应着三种类型的数据：

export class MyComponent {
  submittedData: any[] = [];
  approvedData: any[] = [];
  pendingData: any[] = [];

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.getSubmittedData();
    this.getApprovedData();
    this.getPendingData();
  }

  getSubmittedData() {
    this.http.get('/api/submitted').subscribe((data: any[]) => {
      this.submittedData = data;
    });
  }

  getApprovedData() {
    this.http.get('/api/approved').subscribe((data: any[]) => {
      this.approvedData = data;
    });
  }

  getPendingData() {
    this.http.get('/api/pending').subscribe((data: any[]) => {
      this.pendingData = data;
    });
  }
}

上面的代码中，我们在ngOnInit方法中调用三个不同的http请求，分别获取三种类型的数据，并将其存储在对应的数组中。

接下来，在页面中使用ngFor指令来渲染表格。例如，以下是一个简单的HTML模板，它使用Bootstrap样式来构建三个表格，并将分别使用submittedData、approvedData和pendingData数组来填充每个表格：

<div class="row">
  <div class="col-md-4">
    <h3>Submitted Data</h3>
    <table class="table table-striped">
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Value</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let item of submittedData">
          <td>{{item.id}}</td>
          <td>{{item.name}}</td>
          <td>{{item.value}}</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="col-md-4">
    <h3>Approved Data</h3>
    <table class="table table-striped">
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Value</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let item of approvedData">
          <td>{{item.id}}</td>
          <td>{{item.name}}</td>
          <td>{{item.value}}</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="col-md-4">
    <h3>Pending Data</h3>
    <table class="table table-striped">
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Value</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let item of pendingData">
          <td>{{item.id}}</td>
          <td>{{item.name}}</td>
          <td>{{item.value}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

上述代码会将三个表格依次显示在同一个页面中，每个表格中显示对应的类型的数据。需要注意的是，这里使用了Bootstrap样式来美化表格，你可以根据自己的需要使用其他样式库或自定义CSS来美化表格。