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

Question

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

我收到此错误

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

组件代码：

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

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

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

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

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

Answer 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      
})
}