如何在angular4中实现ngb分页 [英] How to implement ngb-pagination in angular4

查看:122
本文介绍了如何在angular4中实现ngb分页的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试包括ngb-pagination,以及如何使其工作.这可能是重复的,但是由于该答案无效,因此我将其再次发布.

I am trying to include ngb-pagination, how to make that work. this may be a duplicate but since that answer is not working I am posting it again.

我不知道如何使它工作

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

推荐答案

看看这个关于plunker的工作演示:这里

take a look at this working demo on plunker: Here

您可以在此处查看官方文档: https://ng-bootstrap. github.io/#/components/pagination

you can check the official docs over 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回购:

another alternative is to use the ngx-pagination as a simpler soultion take a look at the github repo: Here

这篇关于如何在angular4中实现ngb分页的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆