如何使用 ngFor 向 div 添加分页功能

Question

如何给div添加分页功能。

应用程序组件.html

<div>

 <div *ngFor="let clg of colleges$">
  <h3>{{clg.name}}</h3>
 </div>

 <mat-paginator [length]="100" [pageSize]="10" [pageSizeOptions]="[5, 10, 25, 
 100]"></mat-paginator>

</div>

Answer 1

您可以使用page事件发射器mat-paginator作为(page)="onPageChange($event)"

<div *ngFor="let item of currentItemsToShow, let i=index;">
  Hello {{item.name}}
</div>   

onPageChange($event) {
  this.currentItemsToShow =  this.items.slice($event.pageIndex*$event.pageSize,
  $event.pageIndex*$event.pageSize + $event.pageSize);
}

Stackblitz 演示显示自定义分页器，尝试更改分页器值