如何在 Angular 4 ngx 分页中显示每页的记录

Posted 2023-03-29

【中文标题】如何在 Angular 4 ngx 分页中显示每页的记录

【英文标题】：how to display records per page in angular 4 ngx pagination

【发布时间】：2018-07-22 13:08:07

【问题描述】：

我已经在 Angular 4 中安装了 ngx 分页。一切正常。 我想每页显示记录。 IE。 (Showing: 1 - 10 / 25 )。我已经尝试过，但我没有得到任何解决方案。你能帮我解决这个问题吗？提前致谢。

【问题讨论】：

embed.plnkr.co/JVQMPvV8z2brCIzdG3N4

@bashirudeen，你的问题得到答案了吗？我也遇到了同样的问题

@Bhrungarajni 我也在寻找这个解决方案

@C.Ikongo，我做了自定义代码，对我有用，我会发布我的答案，你可以看看

@Bhrungarajni 有机会我会试试的

【参考方案1】：

您可以在 NgFor 表达式的末尾使用PaginatePipe。您可以传递要显示的记录数作为配置选项。

<element *ngFor="let item of collection | paginate:  itemsPerPage: pageSize,
                                                  currentPage: p,">...</element>

【讨论】：

感谢您的快速回复。我已经完成了这个分页。我想在底部显示（显示：11 - 20 / 25）。

【参考方案2】：

我一直以这种方式工作，它有所帮助，

 public setPageNumbers(pageNo,pageSize) 
    this.startValue = (pageNo * pageSize) - (pageSize -1)
    this.lastValue = this.agentParms.pageNo * this.agentParms.pageSize;
    this.lastValue = this.lastValue > this.agentTotal ? this.agentTotal: this.lastValue;
  

所以在这里我乘以当前页码和页面大小，并减去当前页面大小，所以我得到第一个值，并获得最后一个值，检查页码。和页面大小，并将其显示为最后一个值。如果最后一个值大于总计数，则将总计数作为最后一个值。

希望这会有所帮助。