ฉันได้รับอาร์เรย์ผู้ติดต่อประมาณ 1,000 รายการจาก api ฉันต้องการแสดงในการ์ดข้อมูลที่ติดต่อ อย่างไรก็ตาม ฉันเพียงต้องการแสดงบัตรข้อมูลที่ติดต่อสูงสุด 5 รายการในแต่ละแถว ฉันยังต้องการการแบ่งหน้าเหมือนตัวแบ่งหน้าวัสดุเชิงมุมสำหรับสิ่งนี้
<div class="col" *ngFor="let yuvak of unAssignedYuvaks | paginate: { itemsPerPage: 30, currentPage: p }">
<mat-card class="example-card mt-2">
<mat-card-header>
<mat-card-title> {{yuvak.cnt_first_name + ' ' + yuvak.cnt_last_name}} </mat-card-title>
<mat-card-subtitle> <i class="i-contact nb-phone"></i>{{yuvak.cnt_mobile_no}}</mat-card-subtitle>
<mat-card-subtitle> <fa-icon [icon]="faAt"></fa-icon> {{yuvak.email}}</mat-card-subtitle>
</mat-card-header>
<img mat-card-image src="{{thumbnailImg}}{{yuvak.profile_picture}}" alt="Photo of a {{yuvak.cnt_first_name + ' ' + yuvak.cnt_last_name}}">
<mat-card-content>
</mat-card-content>
<mat-card-actions>
<button mat-button></button>
<button mat-button></button>
</mat-card-actions>
</mat-card>
</div>
นี่คือ div การ์ดของฉัน ฉันต้องการสิ่งนี้