如何使用 ngx-pagination 对 div 进行分页答案

【问题标题】：How to paginate divs with ngx-pagination如何使用 ngx-pagination 对 div 进行分页
【发布时间】：2019-03-16 12:39:50
【问题描述】：

我是 Angular 新手，所以我遇到了这个问题。

<div class="col-md-4" *ngFor="let student of students | paginate: {itemsPerPage:5, currentPage: p, totalItems: len}">
     {{student.name}}
</div>
<pagination-controls (pageChange)="p =$event"></pagination-controls>

我收到了这个错误

无法读取未定义的属性“totalItems” 在 PaginatePipe.push../node_modules/ngx-pagination/dist/ngx-pagination.js.PaginatePipe.transform

组件代码：

public students= [];
public len;
ngOnInit() {
    this.serverService.getStudents().subscribe(
      data => {
        this.students= data,
        this.len = this.students.length
      }
    );
  }

【问题讨论】：

组件代码好吗？
你加了import {NgxPaginationModule} from 'ngx-pagination';
students =[] 是从api填充的数组，是导入的
我添加了 totalItem:students.length，还是不行
能贴出组件的代码吗？

标签： angular ngx-pagination

【解决方案1】：

<tbody *ngFor= "let item of con?.data?.countries | paginate:{itemsPerPage:10,currentPage: p}">
    <tr>
        <td>{{item['name']}}</td>
        <td>{{item['code']}}</td>                             
    </tr>
</tbody>

【讨论】：

您能否添加一些上下文来解释这将如何回答问题，而不是仅代码回答。

【解决方案2】：

我认为您不需要在这里使用totalItems 作为分页属性。 ngx-pagination 会自动将列表/数组的长度视为项目总数。

<div class="col-md-4" *ngFor="let student of students | paginate: {itemsPerPage:5, currentPage: p}">
     {{student.name}}
</div>
<pagination-controls (pageChange)="p =$event"></pagination-controls>

这将解决您原来的问题/错误：

无法读取未定义的属性“totalItems” PaginatePipe.push../node_modules/ngx-pagination/dist/ngx-pagination.js.PaginatePipe.transform

【讨论】：

【解决方案3】：

I am working at Angular 8. This code is helpful to use the 
pagination. I declare base url in API_URL in environment.ts.
example: API_URL:"http....",
endpoint: country

HTML code:
<tbody *ngFor= "let item of con?.data?.countries 
|paginate:itemsPerPage:10,currentPage: p}">
<tr>
<td>{{item['name']}}</td>
<td>{{item['code']}}</td>                             
</tr>
</tbody>

example.component.ts:

骗子：任何；

ngOnInit() {
this.http.get(`${environment.API_URL}/country`).subscribe(res=>{
this.con=res      
})
}

【讨论】：

从 'ngx-pagination' 导入 { NgxPaginationModule };
npm install ngx-pagination --save
为什么要在 cmets 中添加更多代码？只需编辑您的问题
只因为应该安装什么，应该导入什么