前言回顾

昨天我们介绍了如何将 nz-table 和 Material CDK 结合使用，实现拖拽排序和虚拟滚动的功能，今天我们继续介绍第一阶段中 Table 组件最后一个例子：远程加载数据。

开始

起步

我们在之前的例子里，都是采用本地变量来作为数据输入，我们看 nz-table 官方文档 看到如下属性

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

说明如果不涉及异步加载，默认是前端分页模式，可配合 nzPageSize 来决定每页显示数量。

对于异步加载的数据来说，我们当然不希望前端分页，而是向后端请求数据并渲染，对于常规的后端 API 设计来说，一个查询数据接口必然可接受 分页、过滤等参数，返回 数据总量 / 总页码、数据结果 等。

基于此，我们来看看哪些属性是异步加载数据必备的：
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| [nzData] | 数据数组 | any[] | - |
| [nzFrontPagination] | 是否在前端对数据进行分页，如果在服务器分页数据或者需要在前端显示全部数据时传入 false | boolean | true |
| [nzTotal] | 当前总数据，在服务器渲染时需要传入 | number | - |
| [nzPageIndex] | 当前页码，可双向绑定 | number | - |
| (nzPageIndexChange) | 当前页码改变时的回调函数 | EventEmitter<number> | - |
| [nzPageSize] | 每页展示多少数据，可双向绑定 | number | - |
| [nzShowPagination] | 是否显示分页器 | boolean | true |

准备接口

通过 randomuser.me 网站接口，我们能够得到一系列随机生成的用户数据格式，我们精简一下，让该接口可接受 分页、排序 参数。

export class RandomUserService {randomUserUrl = 'https://api.randomuser.me/';getUsers(pageIndex: number = 1,pageSize: number  = 10,sortField: string,sortOrder: string): Observable<{}> {const params = new HttpParams().append('page', `${pageIndex}`).append('results', `${pageSize}`).append('sortField', sortField).append('sortOrder', sortOrder);return this.http.get(`${this.randomUserUrl}`, {params});}constructor(private http: HttpClient) {}
}

查询接口我们可以这样使用：

export class NzDemoTableAjaxComponent implements OnInit {searchData(reset: boolean = false): void {// 每页数目变化时强制刷新if (reset) {this.pageIndex = 1;}this.randomUserService.getUsers(this.pageIndex, this.pageSize, this.sortKey, this.sortValue).subscribe((data: any) => {this.loading = false;this.total = 200;this.listOfData = data.results;this.cdr.markForCheck();});}constructor(private randomUserService: RandomUserService,private cdr: ChangeDetectorRef) {}ngOnInit() {this.searchData();}
}

构建 table

我们从接口出发，了解里 我们的需求，那么 table 组件至少要支持分页和排序功能，先来看分页功能如何配置：

<nz-table#ajaxTable[nzFrontPagination]="false"[nzData]="listOfData"[nzTotal]="total"[(nzPageIndex)]="pageIndex"(nzPageIndexChange)="searchData()">...
</nz-table>

可以看到，我们监听了pageIndex 变化事件，然后触发重新查询事件，当然我们也可以开启每页数目变更功能，自定义每页要显示的数目：

<nz-table#ajaxTablenzShowSizeChanger[nzFrontPagination]="false"[nzData]="listOfData"[nzTotal]="total"[(nzPageIndex)]="pageIndex"[(nzPageSize)]="pageSize"(nzPageIndexChange)="searchData()"(nzPageSizeChange)="searchData(true)">...
</nz-table>

每次页码切换都会触发 searchData 方法去重新请求 API 数据，请求成功后赋值给 listOfData 重新渲染。是不是挺简单的，这样你已经可以将其对接到自己的后端 API 上了（本例子中为了方便，我们直接将 service 写在了 component 中，项目开发过程中最好对 services 放在独立文件夹模块下维护）。

总结 & 预告

那么到今天为止，我们的 nz-table 组件的介绍暂时告一段落，我们重点介绍了一些最常用的使用方法，当然这不是真正的结束，我们在后续进阶阶段会带着大家一起去探索如何自定义改造 NG-ZORRO 的组件，来更好地适应自己的业务需求。

明天开始，我们会介绍 待办事项 中涉及的另一个组件 nz-date-picker 时间组件。

相关资源

• iThelp 文章地址：

• Github 项目地址：

• stackblitz 在线示例代码：

• Table：

• 随机数据 randomuser 网站：