Ngx-bootstrap 分页无法按预期工作

Question

我尝试在我的 Angular 10 应用程序中从 ngx-bootstrap 实现分页。目前记录数为 93 条，每页显示 93 条记录，共 10 页，一次显示 5 页。一次显示 5 页是正确的，因为 maxsize 设置为 5。不知道出了什么问题 itemsperpage 因为我已将其设置为 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

你可以像下面这样使用管道

PaginationPipePipe

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;
}

Demo 在这里

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

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