解决angular11+zorro使用table组件排序失效以及分页组件失效问题，附完整DEMO代码

关于这个排序失效问题的核心点，跟这个有关系：[nzFrontPagination]="false"

关于分页组件失效的问题，是你获取数据以后，需要给页码，页数，总条数都要重新赋值，这个真的是好无语

要考虑清楚，你是前端分页还是后端分页，如果是前端分页，代码可以参考官方zorro文档，里边很多，如果你是后端分页，那么可以参考下面的DEMO

首先新建 一个组件，在路由里和模块里都注册一下，注册路由你自己根据需求来，

• 备注：如果不注册到当前模块，某些zorro的组件是无法使用的，会报错，这个是angular11版本和其他版本的不同之处。。。不再赘述了

来，上DEMO

html

<p>my-test01 works!</p>
<div class="bottom_table">
  <nz-table #filterTable [nzData]="listOfData" nzTableLayout="fixed" [nzShowPagination]="false"
    [nzFrontPagination]="false" [nzScroll]="{ x: '1200px', y: '570px' }">
    <thead>
      <tr>
        <th *ngFor="let column of listOfColumns" [nzSortFn]="column.sortFn" [nzWidth]="column.w"
          (nzSortOrderChange)="sortChange($event,column.key)">
          {{ column.name }}
        </th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let data of filterTable.data">
        <td>{{ data.item01 }}</td>
        <td>{{ data.item02 }}</td>
        <td>{{ data.item03 }}</td>
        <td>{{ data.item04 }}</td>
        <td>{{ data.item05 }}</td>
        <td>{{ data.item06 }}</td>
      </tr>
    </tbody>
  </nz-table>
  <div class="my_page">
    <div class="pagination_css">
      <ng-template #totalTemplate let-total>共{{ total }}條</ng-template>
      <nz-pagination  [(nzPageSize)]="page.pageSize" [(nzPageIndex)]="page.current" [nzTotal]="page.total"
         [nzSize]="'small'" nzShowSizeChanger
        nzShowQuickJumper [nzShowTotal]="totalTemplate" (nzPageIndexChange)="currentChange($event)"
        (nzPageSizeChange)="pageSizeChange($event)"></nz-pagination>
    </div>
  </div>
</div>

ts

import { Component, OnInit } from '@angular/core';
import { NzMessageService } from 'ng-zorro-antd/message';
import { _HttpClient } from '@delon/theme';
interface DataItem {
  item01: number;
  item02: number;
  item03: string;
  item04: string;
  item05: string;
  item06: string;
}
interface ColumnItem {
  name: string;
  w: string;
  key: string,
  sortFn: boolean,
}
@Component({
  selector: 'app-my-test01',
  templateUrl: './my-test01.component.html',
  styleUrls: ['./my-test01.component.less']
})

export class MyTest01Component implements OnInit {

  constructor(

    private msgSrv: NzMessageService,
    public http: _HttpClient,
  ) { }

  ngOnInit(): void {
    this.setData()
  }

  // 分頁代碼
  page = {
    current: 1,
    total: 0,
    pageSize: 10

  }
  totalTemplate = true
  // 分頁代碼
  // 表格代碼----start
  listOfColumns: ColumnItem[] = [
    {
      name: '序號',
      key: 'item01',
      sortFn: false,
      w: '4%',
    },
    {
      name: '第二列',
      key: 'item02',
      sortFn: true,
      w: '4%',
    },
    {
      name: '第三列',
      key: 'item03',
      sortFn: true,
      w: '5%',
    },
    {
      name: '第四列',
      key: 'item04',
      sortFn: true,
      w: '4%',
    },
    {
      name: '第五列',
      key: 'item05',
      sortFn: true,
      w: '4%',
    },
    {
      name: '第六列',
      key: 'item06',
      sortFn: true,
      w: '12%',
    },
  ];
  listOfData: DataItem[] = [
    {
      item01: 1,
      item02: 0.01,
      item03: '1',
      item04: '1',
      item05: '1',
      item06: '1',
    },

  ];
  setData() {
    this.listOfData = new Array(500).fill({}).map((_, i) => {
      return {
        item01: i + 1,
        item02: 0.01 * (i + 1),
        item03: i + 10 + '數據',
        item04: i + 100 + '數據',
        item05: i + 1000 + '數據',
        item06: i + 10000 + '數據',
      }
    })
    this.page.total = this.listOfData.length
  }
  sortChange(e, name) {
    console.log(e, name)
    this.listOfData = e === 'ascend' ? this.listOfData.sort(
      (a, b) => (typeof (a[name]) === 'string') ? a[name].localeCompare(b[name]) : a[name] - b[name]) : this.listOfData.sort(
        (a, b) => (typeof (a[name]) === 'string') ? b[name].localeCompare(a[name]) : b[name] - a[name]
      )
  }
  currentChange(e) {
    this.page.current = e
    console.log('頁碼this.page.current:', this.page.current)
    const params = {
      cur_page: this.page.current,
      page_size: this.page.pageSize,
    }
    this.getTable(params)
  }
  pageSizeChange(e) {
    this.page.pageSize = e
    console.log('頁碼this.page.pageSize:', this.page.pageSize)
    const params = {
      cur_page: 1,
      page_size: this.page.pageSize,
    }
    this.getTable(params)
  }
  baseUrl = ''
  async getTable(params) {
    // const res4: any = await this.myHttpRes('post', this.baseUrl + '/testData', params, false);
    // if (res4 && res4.success) {
    //   this.msgSrv.success(res4.msg ? res4.msg : 'Get Data Success!')
    //   this.listOfData = res4.data.tableData
    //   this.page.total = res4.data.total
    //   console.log(this.listOfData)
    // } else {
    //   this.msgSrv.error(res4 && res4.msg ? res4.msg : 'Get Table Data Fail!')
    // }

    // 模擬數據
    console.log('第几頁：',params.cur_page)
    console.log('每頁條數：',params.page_size)
    let newArr = []
    newArr = new Array(params.page_size).fill({}).map((_, i) => _ = {
      item01: i + 1 + (params.cur_page - 1) * 10,
      item02: 0.01 * (i + 1),
      item03: i + 10 + '數據',
      item04: i + 100 + '數據',
      item05: i + 1000 + '數據',
      item06: i + 10000 + '數據',
    })
    this.listOfData = newArr
    this.page.current = params.cur_page // 解決奇葩的問題
    this.page.pageSize = params.page_size // 解決奇葩的問題
    this.page.total = 500
  }

  // 下面都是工具函數-----------分割線----------------------分割線-----------

  async myHttpRes(method: string, url: string, formData: object = {}, needMsg, msgScu = 'Success!', msgErr = 'Network Error!'): Promise<Node[]> {
    return new Promise<Node[]>((resolve: any, reject: any) => {
      // this.http[method](url, formData).pipe(timeout(12000)).subscribe(
      this.http[method](url, formData).subscribe(
        {
          next: (res: any) => {
            if (res && (['success', 'OK'].indexOf(res.status) !== -1 || res.success || [0].indexOf(res.errorNum) !== -1 || ['1', '0', '000000', '001', '002'].indexOf(res.code) !== -1)) {
              needMsg && this.msgSrv.success(res.message || msgScu)
              resolve(res)
              // resolve(res)
            } else {
              needMsg && this.myAlert(res.message || msgErr)
              // 操作失敗,請檢查網絡重試...
              reject(new Error(res.message || msgErr))
            }
          },
          error: (err: any) => {
            // console.log('走這裡了123',err)
            needMsg && this.myAlert(msgErr)
            reject(new Error(err.message || 'Error'))
          }
        })
    })
  }
  // 因需求增加提示框，樣式需要增加到容易修改的地方
  myAlert(name) {
    var myAlertBigBoxIsTrue = document.getElementById('myMLBAlertBigBox');
    // console.log(myAlertBigBoxIsTrue);
    if (myAlertBigBoxIsTrue === null) {

      // 創建一個遮罩層
      var bigbox = document.createElement("div");
      bigbox.id = "myMLBAlertBigBox";
      //创建一个大盒子
      var box = document.createElement("div");
      var myspan = document.createElement('span');
      //创建一个关闭按钮
      var button = document.createElement("button");

      bigbox.appendChild(box);
      // 設置遮罩層的樣式
      var bigboxName = {
        "width": "100%",
        "height": "100vh",
        "background-color": "rgba(0,0,0,0.4)",
        "position": "fixed",
        "top": "0",
        "left": "0",
        "z-index": "1000",
        "text-align": "center"
      }
      //给元素添加元素
      for (var k in bigboxName) {
        bigbox.style[k] = bigboxName[k];
      }
      //定义一个对象保存样式
      var boxName = {
        width: "500px",
        height: "180px",
        backgroundColor: "white",
        border: "1px solid rgb(226,222,222)",
        position: "absolute",
        "box-shadow": "5px 5px 10px 2px rgba(0,0,0,0.4)",
        top: "20%",
        "border-radius": "5px",
        left: "50%",
        margin: "-90px 0 0 -250px",
        zIndex: "1001",
        textAlign: "center",
        lineHeight: "180px"
      }
      //给元素添加元素
      for (var k in boxName) {
        box.style[k] = boxName[k];
      }
      //把创建的元素添加到body中
      document.body.appendChild(bigbox);
      //把alert传入的内容添加到box中
      if (arguments[0]) {
        // box.innerHTML = arguments[0];
        myspan.innerHTML = arguments[0];
      }
      // 定義span樣式
      var spanName = {
        "text-align": "left",
        "line-height": "30px",
        "border-radius": "5px",
        "outline": "none",
        "word-break": "break-all",
        "position": "absolute",
        "overflow-y": "auto",
        "overflow": "auto",
        "height": "112px",
        "top": "20px",
        "right": "25px",
        "left": "25px",

      }
      for (var j in spanName) {
        myspan.style[j] = spanName[j];
      }

      // bigbox.appendChild(box);
      box.appendChild(myspan);
      button.innerHTML = '關閉'// 改為I18N
      // button.innerHTML = this.fanyi('button.close');
      //定义按钮样式
      var btnName = {
        border: "1px solid #ccc",
        backgroundColor: "#fff",
        width: "70px",
        height: "30px",
        textAlign: "center",
        lineHeight: "27px",
        "border-radius": "5px",
        outline: "none",
        position: "absolute",
        bottom: "10px",
        right: "20px",

      }
      for (var j in btnName) {
        button.style[j] = btnName[j];
      }
      //把按钮添加到box中
      box.appendChild(button);
      //给按钮添加单击事件
      button.addEventListener("click", function () {
        bigbox.style.display = "none";
        var idObject = document.getElementById('myMLBAlertBigBox');
        if (idObject != null)
          idObject.parentNode.removeChild(idObject);
      })
    } else {
      return;
    }
  }
  // 因需求增加提示框，樣式需要增加到容易修改的地方
}