如何在angular4中实现ngb-pagination

Question

我正在尝试包括 ngb-pagination，如何让它工作。这可能是重复的，但由于该答案无效，我再次发布。

我不知道如何让它工作

 <tr *ngFor="let data of reportsData;let i = index; trackBy: trackByFn">
        <td>{{data.time_stamp}}</td>
      </tr>
    </tbody>
    <ngb-pagination [collectionSize]="50" [page]="1" [maxSize]="5" [rotate]="true" [boundaryLinks]="true"></ngb-pagination>

Answer 1

看看这个关于 plunker 的工作演示：Here

你可以在这里查看官方文档：https://ng-bootstrap.github.io/#/components/pagination

<ngb-pagination [collectionSize]="70" [(page)]="page" [directionLinks]="false"></ngb-pagination>

在组件中

import {Component} from '@angular/core';

@Component({
  selector: 'ngbd-pagination-basic',
  templateUrl: 'src/pagination-basic.html'
})
export class NgbdPaginationBasic {
 //setting the default page
  page :number = 1;
}

另一种选择是使用 ngx-pagination 作为更简单的解决方案，看看 github 存储库：Here

Answer 2

我还没有这样做，但我想我找到了每个初学者问的问题的答案（我也是）：为什么 ngb-pagination 不起作用？

您应该按页面切片您的JSON数据，并在组件HTML中迭代切片数据（注意：这只是查看代码示例！） .

<div *ngFor="let item of pagedItems">{{item.name}}</div>

您可以在此找到更多信息 article and in 。

如何在angular4中实现ngb-pagination

How to implement ngb-pagination in angular4

pagination

ng-bootstrap

angular