《Angular--ng-zorro-antd---table筛选数据无法正常显示》 ITOO前端研究

前言：
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;

结语：
【《Angular--ng-zorro-antd---table筛选数据无法正常显示》】the best preparation for tomorrow is doing your best today.