如何解决如何在Angular中对NG-ZORRO进行分页
我想在HTML页面中使用NG-ZORRO分页,它可以正常工作,但是如何将内容与分页链接?
这是我的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>
我正在用HTML进行分页,但是它没有与内容链接。我以前使用过ngx-pagination,但是我想在代码中使用nz-pagination,所以有人可以帮我怎么做。
这是NG-ZORRO Click here for link
的官方链接谢谢。
解决方法
您需要实现将在页面索引更改时触发的事件。
要进行绑定,请使用(nzPageIndexChange):
<nz-pagination [nzPageIndex]="1" [nzTotal]="500" [nzPageSize]="2" (nzPageIndexChange)="onPageIndexChange($event)" id="demo"></nz-pagination>
然后在您的组件中可以像下面这样实现:
export class YourAngularComponent{
onPageIndexChange($event) {
//do something here to go to next page
}
.
.
}