Angular中NG Zorro卡片分页实现：每页3张，按需显示分页

Hey there! Let's tackle your pagination needs for the nz-card components in your Angular project, along with the dynamic visibility of the pagination component. Here's a step-by-step solution:

1. 更新 Component 逻辑（home.component.ts） #

First, we'll add pagination state variables and calculate the data to display for the current page:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  // 原始数据集
  data = [
    { title: 'title1', description: 'description1' },
    { title: 'title2', description: 'description2' },
    { title: 'title3', description: 'description3' },
    { title: 'title4', description: 'description4' },
    { title: 'title5', description: 'description5' },
    { title: 'title6', description: 'description6' },
    { title: 'title7', description: 'description7' },
    { title: 'title8', description: 'description8' },
    { title: 'title9', description: 'description9' },
    { title: 'title10', description: 'description10' }
  ];

  // 分页相关变量
  currentPage = 1;
  pageSize = 3; // 想改成每页4条的话，直接把这个值改成4即可
  paginatedData: any[] = [];

  ngOnInit() {
    this.updatePaginatedData();
  }

  // 更新当前页要展示的数据
  updatePaginatedData() {
    const startIndex = (this.currentPage - 1) * this.pageSize;
    const endIndex = startIndex + this.pageSize;
    this.paginatedData = this.data.slice(startIndex, endIndex);
  }

  // 页码切换时触发的方法
  onPageChange(page: number) {
    this.currentPage = page;
    this.updatePaginatedData();
  }
}

2. 调整模板（home.component.html） #

我们要循环分页后的数据而非原始数组，再给分页组件加上显示条件：

<!-- 卡片列表：遍历分页后的数据 -->
<ng-container *ngFor="let item of paginatedData; let idx = index">
  <nz-card style="width:300px; margin-bottom: 16px;" [nzActions]="[actionSetting,actionEdit,actionEllipsis]">
    <nz-card-meta 
      nzTitle="{{item.title}}" 
      nzDescription="{{item.description}}"
      [nzAvatar]="avatarTemplate">
    </nz-card-meta>
  </nz-card>

  <ng-template #avatarTemplate>
    <nz-avatar nzIcon="user"></nz-avatar>
  </ng-template>

  <ng-template #actionSetting>
    <div class="action-wrapper">
      <i nz-icon type="setting"></i>{{idx + 1}}
    </div>
  </ng-template>
  <ng-template #actionEdit>
    <div class="action-wrapper">
      <i nz-icon type="edit"></i>{{idx + 1}}
    </div>
  </ng-template>
  <ng-template #actionEllipsis>
    <div class="action-wrapper">
      <i nz-icon type="ellipsis"></i>{{idx + 1}}
    </div>
  </ng-template>
</ng-container>

<!-- 分页组件：仅当数据总数大于每页显示数时才显示 -->
<nz-pagination
  *ngIf="data.length > pageSize"
  [(nzPageIndex)]="currentPage"
  [nzPageSize]="pageSize"
  [nzTotal]="data.length"
  (nzPageIndexChange)="onPageChange($event)"
  style="margin-top: 24px; text-align: center;">
</nz-pagination>

关键说明 #

• 分页数据处理：通过slice方法从原始数据中截取当前页的内容，起始和结束索引由当前页码和每页大小计算得出。
• 分页组件显示逻辑：*ngIf="data.length > pageSize"确保只有当数据总数超过单页容量时才渲染分页组件，刚好等于3条（pageSize=3时）会自动隐藏。
• 切换为每页4条：只需把组件类中的pageSize值从3改成4，分页逻辑和显示条件会自动适配，无需额外修改其他代码。

内容的提问来源于stack exchange，提问作者Panda