【Angular】ng-zorro-ant跟后端接口交互使用loading加载

经常需要在表格获取后端接口数据时显示loading,获取完成或者失败时loading结束，用table来进行总结一下

1.在ts中声明一个loading变量

isLoadingTable: boolean = false;

2.在html中绑定loading变量

<nz-table [nzLoading]="isLoadingTable" [nzFrontPagination]="false"  [nzData]="tableList" [nzShowPagination]="false" nzSize="small" [nzScroll]="{ x : '1000px' }">
</nzLoading>

3.在ts中引入finalize

import { finalize } from 'rxjs/operators'

4.在获取接口处使用loading显示和隐藏

  onSearch() {
    this.isLoadingTable = true;

    let httpOptions = {
      params: new HttpParams()
        .append("pageNumber", this.PageIndex)
        .append("pageSize", this.PageSize)
    };

    this.http.get(this.commonService.infoListAPI, httpOptions).pipe((finalize(() => {
      this.isLoadingTable = false;
    }))).subscribe((res: any) => {
      if(res.code == 200){
        this.tableList = res.data.list;
        this.listPage.Total = res.data.total;
      }else{
        this.message.error(res.msg);
      }
    });
   }

总结：通过使用finalize不管请求成功还是失败都会走这里，所以就可以只在一个地方将loading变量改为false

rxjs需要用npm或cnpm安装，本项目在package.json的配置如下：

"dependencies":{
	"rxjs":"~6.6.0"
}