《Angular--ng-zorro-antd---table筛选数据无法正常显示》

前言：

       the best way out is always through

正文：

   问题场景

  根据ng-zorro-antd的table,新增筛选功能,nameList按照组件库是直接初始化数据的:

nameList = [
    { text: 'Joe', value: 'Joe' },
    { text: 'Jim', value: 'Jim' }
  ];

 在实际应用中,应该是要灵活与后端交互获取的,于是修改为:

​
nameList = [];
getTableData() {
    console.log(this.pageIndex);
    console.log(this.pageSize);
    const url = 'demo-web/foo/queryAllFoo/' + this.pageIndex + '/' + this.pageSize;
    this.http.get(url).subscribe(
      res => {
        if (res.json().code === ResponseCode.SUCCESSCODE) {
          if (res.json().data.length === 0) {
            this.tipMsgService.createMessage('温馨提示', '获取数据为空');
          } else {
            this.dataSet = res.json().data.list
            // 这部分有变化
            this.dataSet.forEach(
              item => {
                this.nameList.push({text: item.userName, value: item.userName})
              }
            )
            console.log(this.dataSet);
            this.total = res.json().data.total;
          }
        } else if (res.json().code === ResponseCode.FAILCODE) {
          console.log(res.json().message);
          this.tipMsgService.createMessage(ResponseCode.ErrorTip, '表格数据初始化查询失败')
        }
      }
    );
    // 数据加载延长时间--三秒
    window.setTimeout(() => {
      this.loading = false;
    }, 1000);
  }

​

 结果不起作用,在页面上无法渲染。

    问题定位

        当最终显示到html上的数据需要进行转换处理时，需要重新定义一个变量，作为中间介质来进行赋值.

    解决方案 

     定义两个数组,一个用来组成nameList最终要的数据结构.然后再赋值给nameList:

            nameList = [];
            orginNameList = [];

            this.dataSet.forEach(
              item => {
                this.orginNameList.push({text: item.userName, value: item.userName})
              }
            )
            this.nameList = this.orginNameList;

结语：

       the best preparation for tomorrow is doing your best today.