前言回顾
昨天我们介绍了如何将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
angular-ec7vph-pbqnt1 - StackBlitz我们从接口出发,了解里 我们的需求,那么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
时间组件。