如何显示和限制 ng zorro 卡阵列为 3，它将以角度添加分页

Question

how to limit the display of ng zorro card to per 3 card and it will add a pagination.

here's the code: home.component.html

<ng-container *ngFor="let data of data">
    <nz-card style="width:300px;" [nzActions]="[actionSetting,actionEdit,actionEllipsis]">
        <nz-card-meta nzTitle="{{data.title}}" nzDescription="{{data.description}}" [nzAvatar]="avatarTemplate"></nz-card-meta>
    </nz-card>
    <ng-template #actionSetting>
    <div class="action-wrapper">
      <i nz-icon type="setting"></i>{{idx}}
    </div>
  </ng-template>
  <ng-template #actionEdit>
    <div class="action-wrapper">
      <i nz-icon type="edit"></i>{{idx}}
    </div>
  </ng-template>
  <ng-template #actionEllipsis>
    <div class="action-wrapper">
      <i nz-icon type="ellipsis"></i>{{idx}}
    </div>
  </ng-template>
</ng-container>

home.component.ts

  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' }
  ]

what I want to do is to limit it item to 3 card and it will add pagination.

if the array is more than 3 records it will add the pagination, if just 3 the pagination will not display.

Answer 1

you should limit the ngFor iteration and then use ngIf for the pagination:

 <ng-contaier *ngFor="let item of data | slice:initValue:endValue">
    ....
 </ng-container>

 <div *ngIf="data.length > 3">
     <!-- pagination code  define initValue and endValue here depending on your pagination!! -->
 </div>