Angular Ngx boostrap分页未按预期工作

我尝试在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>

---

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

以及从

（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>

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

---

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

以及从

（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>

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

---

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

分页管道

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

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

---

在这里

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

分页管道

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

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

---

在这里

您拥有页面上的所有元素，因为此组件不划分元素列表，这是您或服务器的工作。

---

此组件仅管理显示和分页状态。

您拥有页面上的所有元素，因为此组件不划分元素列表，这是您或服务器的作业。

---

此组件仅管理显示和分页状态。

您在模板中放入的任何表达式都将在每个变更检测周期中重新计算，例如，

*ngFor=“let customerDetails of customerDetails.slice（（currentPage-1）*itemsPerPage，currentPage*itemsPerPage）”

。因此，我将在

pageChanged

方法中计算当前项的数组，并在

ngFor

中使用该数组。组件类中的内容也更容易测试。此外，我会将

trackBy

添加到

ngFor

@AlexBiro是的，我会在有机会时更新我的答案。您可以有一个额外的数组。并在

pageChanged

函数中定义它。在模板中放入的任何表达式都将在每个变更检测周期中重新计算，例如

*ngFor=“let customerDetails of customerDetails.slice（（currentPage-1）*itemsPerPage，currentPage*itemsPerPage）”

。因此，我将在

pageChanged

方法中计算当前项的数组，并在

ngFor

中使用该数组。组件类中的内容也更容易测试。此外，我会将

trackBy

添加到

ngFor

@AlexBiro是的，我会在有机会时更新我的答案。您可以有一个额外的数组。并在

pageChanged

函数中定义它。