以下三个方法已经取出了我想要的对应的数据现在想要对这些数据分别进行分页处理我应该怎么修改代码 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 ?? []; }); }
时间: 2023-12-10 08:41:56 浏览: 79
您可以使用 Angular 中的内置分页器来对数据进行分页处理。以下是您可以尝试的代码示例:
首先,您需要在组件中设置每个分页器的页面大小,例如:
```typescript
// Set the page size for each pagination
pageSize = 10;
```
然后,您可以使用 `slice` 方法对每个数组进行分页处理:
```typescript
// Slice the auditingApprovalRecords array based on the current page and page size
auditingApprovalRecordsPage = this.auditingApprovalRecords.slice((this.auditingPage - 1) * this.pageSize, this.auditingPage * this.pageSize);
// Slice the createdApprovalRecords array based on the current page and page size
createdApprovalRecordsPage = this.createdApprovalRecords.slice((this.createdPage - 1) * this.pageSize, this.createdPage * this.pageSize);
// Slice the auditedApprovalRecords array based on the current page and page size
auditedApprovalRecordsPage = this.auditedApprovalRecords.slice((this.auditedPage - 1) * this.pageSize, this.auditedPage * this.pageSize);
```
在这里,`auditingPage`、`createdPage`和`auditedPage`是当前页码,您需要在组件中设置它们并将其绑定到分页器。
最后,您可以在模板中使用 Angular 内置的分页器组件来显示分页器并显示分页后的数据,例如:
```html
<!-- Show pagination and data for auditingApprovalRecords -->
<ngb-pagination [(page)]="auditingPage" [pageSize]="pageSize" [collectionSize]="auditingApprovalRecords.length"></ngb-pagination>
<div *ngFor="let record of auditingApprovalRecordsPage">
<!-- display record data here -->
</div>
<!-- Show pagination and data for createdApprovalRecords -->
<ngb-pagination [(page)]="createdPage" [pageSize]="pageSize" [collectionSize]="createdApprovalRecords.length"></ngb-pagination>
<div *ngFor="let record of createdApprovalRecordsPage">
<!-- display record data here -->
</div>
<!-- Show pagination and data for auditedApprovalRecords -->
<ngb-pagination [(page)]="auditedPage" [pageSize]="pageSize" [collectionSize]="auditedApprovalRecords.length"></ngb-pagination>
<div *ngFor="let record of auditedApprovalRecordsPage">
<!-- display record data here -->
</div>
```
这将显示三个分页器,每个分页器都与相应的数组进行交互,并在每个分页器下方显示分页后的数据。
阅读全文