Ngx助推段分页未按要求工作

Question

我已经尝试在angular 10应用程序中从ngx引导实现分页。目前记录数为93，每页显示93条记录，总共显示10页，每次显示5页。一次显示5页是正确的，因为maxsize设置为5。不确定每页有什么问题，因为我已经将其设置为5，但它显示了所有93

<div *ngIf="customerDetails">
<table id="customerdetails-table" class="table table-bordered table-striped">
<thead>
<th>Customer</th>
<th>Company Name</th>
<th>Contact Name</th>
<th>Address</th>
<th>City</th>
<th>Postal Code</th>
<th>Country</th>
<th>Phone</th>
<th>View Order</th>
</thead>
<tbody>
<tr *ngFor="let custDetails of customerDetails">
<td>{{custDetails.customerId}}</td>
<td>{{custDetails.companyName}}</td>
<td>{{custDetails.contactName}}</td>
<td>{{custDetails.address}}</td>
<td>{{custDetails.city}}</td>
<td>{{custDetails.postalCode}}</td>
<td>{{custDetails.country}}</td>
<td>{{custDetails.phone}}</td>
<td>{{custDetails.customerId}}</td>
</tr>
</tbody>
</table>
<pagination [totalItems]="totalItems" [itemsPerPage] = "5"  [maxSize]="maxSize" ></pagination>
</div>

组件

totalItems: number;
maxSize = 5;
ngOnInit(): void {
this.getCustomerDetails();
}
getCustomerDetails(): void {
this.customerDetailsService.getCustomerDetails()
.subscribe(  data => { this.customerDetails =  data;
this.totalItems = data.length;
}
);
}

Answer 1

您可以使用类似以下的管道

寻呼管道

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'paginationPipe'
})
export class PaginationPipePipe implements PipeTransform {
transform(value: any[], currentPage:number,perpage:number): any {
let result =  value.filter((curr,index)=>{
return index >= (currentPage-1)*perpage && index < currentPage *perpage
}); 
return result;
}
}

在像这样的html使用管道中，

<tr *ngFor="let custDetails of (customerDetails | paginationPipe:currentPage:itemsPerPage)">

然后将事件进行分页，如下所示

<pagination [totalItems]="customerDetails.length" (pageChanged)="pageChanged($event)" [itemsPerPage] = "5"  [maxSize]="5" ></pagination>

在组件更改中，您发送到管道的当前索引

pageChanged(event:any) {
this.currentPage = event.page;
}

演示在这里

Answer 2

看起来，您需要有另一个属性来存储页面的当前索引。像这样的东西。

以及从(currentPage - 1) * itemsPerPage到currentPage * itemsPerPage的每个时间循环

模板

<div *ngIf="customerDetails">
<table id="customerdetails-table" class="table table-bordered table-striped">
<thead>
<th>Customer</th>
<th>Company Name</th>
<th>Contact Name</th>
<th>Address</th>
<th>City</th>
<th>Postal Code</th>
<th>Country</th>
<th>Phone</th>
<th>View Order</th>
</thead>
<tbody>
<tr *ngFor="let custDetails of currentPageCustomers">
<td>{{custDetails.customerId}}</td>
<td>{{custDetails.companyName}}</td>
<td>{{custDetails.contactName}}</td>
<td>{{custDetails.address}}</td>
<td>{{custDetails.city}}</td>
<td>{{custDetails.postalCode}}</td>
<td>{{custDetails.country}}</td>
<td>{{custDetails.phone}}</td>
<td>{{custDetails.customerId}}</td>
</tr>
</tbody>
</table>
<pagination 
[currentPage]="currentPage"
(pageChange)="pageChanged($event)"
[totalItems]="totalItems" 
[itemsPerPage] = "itemsPerPage"  
[maxSize]="maxSize">
</pagination>
</div>

组件

currentPage = 1;
itemsPerPage = 5;
totalItems: number;
maxSize = 5;
currentPageCustomers = [];
ngOnInit(): void {
this.getCustomerDetails();
}
getCustomerDetails(): void {
this.customerDetailsService
.getCustomerDetails()
.subscribe(data => { 
this.customerDetails = data;
this.totalItems = data.length;
if(this.totalItems) {
// call pageChanged function for define currentPageCustomers property 
pageChanged(1);
}
}
);
}
pageChanged(currentPageIndex: number) {
// currentPageIndex starts at 1
this.currentPage = currentPageIndex;
// for example in case of currentPage = 1;
// the code will be slice from (1 - 1) * 5 to 1 * 5
// from 0 to 5
this.currentPageCustomers = this.customerDetails
.slice(
(this.currentPage - 1) * this.itemsPerPage,
this.currentPage * this.itemsPerPage
);
}

Answer 3

您拥有页面上的所有元素，因为该组件不会分割您的元素列表，这是您或服务器的工作。此组件仅管理显示和分页状态。