前言：

       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.