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 repo：Here

Answer 2

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

您应按页面切片JSON数据，并在组件HTML中迭代切片数据（注意：这只是视图代码示例！）。

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

您可以在article和this question中找到更多信息。

如何在angular4中实现ngb-pagination

2 个答案: