ant design vue table 高度自适应_[Angular 组件库 NG-ZORRO 基础入门] - Table：远程加载

前言回顾

昨天我们介绍了如何将

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​stackblitz.com

我们从接口出发，了解里 我们的需求，那么

table

组件至少要支持分页和排序功能，先来看分页功能如何配置：

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

可以看到，我们监听了

pageIndex

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

<nz-table
    #ajaxTable
    nzShowSizeChanger
    [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 文章地址：

https://ithelp.ithome.com.tw/articles/10214572​ithelp.ithome.com.tw

• Github 项目地址：

simplejason/ng-zorro-ironman2020​github.com

• stackblitz 在线示例代码：

angular-ec7vph-pbqnt1 - StackBlitz​stackblitz.com

• Table：

https://ng.ant.design/components/table/zh​ng.ant.design

• 随机数据 randomuser 网站：

Random User Generator​randomuser.me