Question

我尝试在我的angular 10应用程序中从ngx-bootstrap实现分页。当前记录数为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

您可以使用如下所示的管道

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

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

Ngx-boostrap分页无法正常工作

3 个答案: