时间戳

首页 > 解决方案 > 如何在 Angular 中使用 NG-ZORRO 进行分页

html - 如何在 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 的官方链接点击这里查看链接

提前致谢。

标签： htmlangularjsangularpaginationng-zorro-antd

解决方案

您需要实现将在页面索引更改时触发的事件。

对于绑定使用（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
  }
.
.
}

推荐阅读