angular7 ng-zorro框架的列表实现前端分页

废话就不多写了

html页面代码如下：

<nz-table #basicTable [nzData]="listOfData.data"

(nzPageIndexChange)="listOfData.pageIndexChange($event)" [nzScroll]="{ y: '240px' }"

[nzFrontPagination]="false" [nzTotal]="listOfData.total" [(nzPageIndex)]="listOfData.pageIndex" [(nzPageSize)]="listOfData.pageSize"

>

</nz-table>

表格属性说明：

nzScroll ：我这里的配置意思是 超过240像素 出现纵滚动条

nzPageIndexChange：index改变时调用的函数

nzFrontPagination：是否在前端对数据进行分页，如果在服务器分页数据或者需要在前端显示全部数据时传入 false

其他的参数就不用写了 你们应该都知道

对应的 ts 代码如下

这里我写了一个根据每页数据条数 改变执行的回调函数（以防备用）  我html中某页没用这个  不需要的可以不用写

说明一下  这个值 flowDataBf  这是对接口返回数据的备份

我们需要在获取接口返回数据后，备份一下完整的接口数据，并计算一下完整的total值 再调用一下分页函数（这里相当于初始化页面数据）

这三大处 分别都需要配置 才可以实现前端分页

1.html页面 表格接受相应的参数 及触发函数

2.ts 初始化表格参数/回调函数数据  分页或者条数尺寸改变时的数据分割函数

3.获取数据来源时 需要做一个深拷贝的备份 并且赋值完整数据的total数 ，调用分割数据的函数（第一页数据展示初始化）