关于分页组件失效的问题，是你获取数据以后，需要给页码，页数，总条数都要重新赋值，这个真的是好无语
要考虑清楚，你是前端分页还是后端分页，如果是前端分页，代码可以参考官方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 = {
"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",
"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;
}
}
// 因需求增加提示框，樣式需要增加到容易修改的地方
}
