Как отобразить и ограничить массив карт ng zorro до 3, и это добавит нумерацию страниц в angular

Question

как ограничить отображение карты ng zorro на 3 карты, и это добавит нумерацию страниц.

вот код: 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' }
  ]

я хочу ограничить этот элемент 3 карточкой и он добавит нумерацию страниц.

, если в массиве более 3 записей, он добавит нумерацию страниц, если только 3 нумерация страниц не будет отображаться.

Answer 1

Вы должны ограничить итерацию ngFor, а затем использовать ngIf для нумерации страниц:

 <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>