Question

我在列表上使用ngx分页，其中包含330条记录，我将页面的项目设置为10。但是，每当加载页面时，它都会显示诸如“显示330中的330” 之类的消息，而不是 >“ 330之10” 。所以，请问有人可以向我建议解决方案吗？

这是我的代码：

<div class="message">
  Showing : <b>{{tempAccountType?.length}}</b> Out of : <b>{{AccountType?.length}}</b> Records.
</div>
<div>
  <pagination-controls (pageChange)="pageActual = $event" responsive="true" previousLabel="Previous" nextLabel="Next">
  </pagination-controls>
</div>

Answer 1

应该将PaginatePipe放在NgFor表达式的末尾。它接受一个参数，一个对象符合 PaginationInstance接口。

<div class="list">
        <ul>
            <li *ngFor="let item of collection | paginate:  {
                currentPage: 1,
                itemsPerPage: 10}">
                {{ item }}
            </li>
        </ul>
  <pagination-controls  
    (pageChange)="pageActual = $event" 
    responsive="true" 
    previousLabel="Previous" 
    nextLabel="Next">
  </pagination-controls>
</div>

示例：https://stackblitz.com/edit/ngx-pagination

有关更多信息，请检查文档：https://www.npmjs.com/package/ngx-pagination#paginatepipe

记录无法正确显示的angular6 ngx分页消息

1 个答案: