《Angular--ng-zorro-antd---table篩選資料無法正常顯示》
阿新 • • 發佈:2018-12-19
前言:
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.