[英]How to paginate with NG-ZORRO in Angular
I want to use NG-ZORRO pagination in the Html page, it's working but fine but how do I link content with the pagination?我想在 Html 页面中使用 NG-ZORRO 分页,它可以工作但很好,但是如何将内容与分页链接起来?
This is my Html code这是我的 HTML 代码
<div class="row card-group-row">
<div class="col-md-6 col-lg-4 col-xl-3" *ngFor="let course of draftCourses"> //I want to paginate this data
<div class="card-blog">
<a href="#">
<img src="../assets/images/image.jpg" alt="" class="img-blog" />
</a>
<div class="card-blog-wrap">
<a href="#">
<h4 class="title-blog">{{course.course_title}}</h4>
</a>
</div>
</div>
</div>
<nz-pagination [nzPageIndex]="1" [nzTotal]="500" [nzPageSize]="2" id="demo"> </nz-pagination>
</div>
I am getting pagination in HTML but it's not linked with the content.我在 HTML 中获得分页,但它与内容无关。 I have used ngx-pagination before but I want to use nz-pagination in my code, so can someone help me how to do it.我之前使用过 ngx-pagination,但我想在我的代码中使用 nz-pagination,所以有人可以帮助我如何做到这一点。
This is the official link for NG-ZORRO Click here for link这是 NG-ZORRO 的官方链接单击此处获取链接
Thanks in advance.提前致谢。
You need to implement event which will trigger on page index change.您需要实现将在页面索引更改时触发的事件。
For binding use (nzPageIndexChange) :对于绑定使用(nzPageIndexChange) :
<nz-pagination [nzPageIndex]="1" [nzTotal]="500" [nzPageSize]="2" (nzPageIndexChange)="onPageIndexChange($event)" id="demo"></nz-pagination>
Then in your component you can implement like below:然后在您的组件中,您可以实现如下:
export class YourAngularComponent{
onPageIndexChange($event) {
//do something here to go to next page
}
.
.
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.