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

本文主要是介绍解决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// 分頁代碼// 表格代碼----startlistOfColumns: 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 = econsole.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 = econsole.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 = newArrthis.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;}}// 因需求增加提示框，樣式需要增加到容易修改的地方
}

在这里插入图片描述