如何在 Angular 6/7 中使用 ngb-pagination 在 [collectionSize] 中设置动态值？答案

【问题标题】：How to set dynamic value in [collectionSize] using ngb-pagination in angular 6/7?如何在 Angular 6/7 中使用 ngb-pagination 在 [collectionSize] 中设置动态值？
【发布时间】：2018-12-18 13:35:58
【问题描述】：

我使用ngb-pagination 为我的表格进行动态分页。我有一个问题来动态设置collectionSize 值。

我设置了什么

<ngb-pagination [collectionSize]="totalDataCount" [(page)]="page" [boundaryLinks]="true" (pageChange)="loadPage($event)"></ngb-pagination>

我也尝试过[(collectionSize)]，但不起作用。

在 .ts 文件中

totalDataCount;

// In API call function 
this.apiService.POST(obj,'getList')
  .subscribe((response)=>{         
      if(response.code == 1){            
        this.totalDataCount = response.data.total;
        this.driverList = response.data.list; 
        console.log(response);           
      }
  },(error)=>{
    console.log("error");
  })

当我控制台 totalDataCount 时，它是控制台的正确值。我想我错过了非常小的东西，但我不知道那是什么。

注意：如果我使用[collectionSize]="15" 作为固定值，那么它可以工作。

我想要设置的是，例如。我有 35 条记录，并且我已将 perPage 值设置为 10，然后我的分页将动态设置为 [1,2,3,4]。

我从这个参考链接中使用了它。

Plunker ref

Link

现在我已经设置 pageSize= 5;

正如你在图片中看到的，我的值为 6，所以预期的分页是 [1,2] 但现在我在分页中只有 1。

【问题讨论】：

知道有什么想法吗？
检查这个：github.com/ng-bootstrap/ng-bootstrap/issues/1219
@Chellappan 正如我在问题中提到的那样，我已经在使用此链接。
您的意思是，如果您的收藏为 6，页面大小为 5，则分页未按预期显示？
@Chellappan 它对我有用！问题是缺少 pageSize。请添加您的答案。我会接受的。 :)

标签： pagination angular6

【解决方案1】：

ngb-pagination 的默认 pageSize 为 10，您应该根据需要分配该值

component.html

<ngb-pagination [collectionSize]="6" [pageSize]="pageSize" [(page)]="page" aria-label="Default pagination"></ngb-pagination>

组件.ts

 pageSize='5';

【讨论】：