角度分页到数组答案

【问题标题】：Angular pagination to array角度分页到数组
【发布时间】：2020-10-29 00:20:02
【问题描述】：

如何在数组中使用角度分页？这是我尝试过的，但不起作用

.html

<div *ngFor="let item of array">
    {{item}}
</div>
<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>

.ts

array: any = ['1', '2', '3', '4', '5', '6', '7']

@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
ngOnInit() {
        this.array.paginator = this.paginator
    }

这个截图是结果，看起来分页源中没有显示“0 of 0”的数据

如何实现对这个数组的分页？请帮帮我，谢谢

【问题讨论】：

stackoverflow.com/questions/59399019/…
@Eliseo 谢谢，分页正在工作，但有一个问题，我如何在这里使用 pageSizeOption？我可以从 .ts 文件中看到页面大小是动态的，但我想在前端管理这个页面大小，从上面的结果“每页项目数 (5,20,50,100)”的屏幕截图中管理这个页面大小
::glups:: 编辑答案时，忘记添加[pageSize]="pageSize" - 刚刚在答案和stackblitz中更正

标签： angular pagination angular-material

【解决方案1】：

如果它的数据是同步的，那么你可以使用<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" [length]="array.length"></mat-paginator> 如果您从您的 BE 获取数据，那么 BE 必须返回如下内容：

{
  data:[1,2,3,4,5],
  _paging: {
     page:1,
     perPage:5,
     total:15
   }
}

然后以某种方式保存总数并在分页器长度中使用它

【讨论】：

【解决方案2】：

在上面的答案中添加一些点我认为他错过了一些点 mat-paginator 也有 pageSize 选项，所以它应该类似于......

<mat-paginator  #paginator [pageSize]="10" [length]="array.length" [pageSizeOptions]="[2, 10, 20, 50, 100]">

【讨论】：