我正在使用 nz-table 标签,我的表配置如下。
<nz-table #stockTable
[nzData]="listData" nzSize="small"
[nzLoading]="loading"
[nzTotal]="pageTotal"
[nzPageIndex]="pageIndex"
[nzPageSize]="pageSize"
[nzShowPagination]="true">
而不是使用表格分页而是使用单独的分页组件,如下所示
<nz-pagination (nzPageIndexChange)="pageIndexChanged($event)" (nzPageSizeChange)="pageSizeChanged($event)"
[nzPageIndex]="pageIndex" [nzPageSizeOptions]="pageSizeOptions"
[nzPageSize]="pageSize" [nzTotal]="pageTotal" [nzShowTotal]="totalTemplate"
class="pagination" nzShowQuickJumper
nzShowSizeChanger>
<ng-template #totalTemplate let-total> Toplam {{ total }} stok bulunmaktadır.</ng-template>
</nz-pagination>
更新到版本 9 ng-zorro 后。当按 nz-pagination 显示数据来自 API 但页面不刷新的第二页时,nz-pagination 在版本 8 上开始不像以前那样工作。所有数据都属于第 1 页
我还添加了 pageIndexchange 和加载数据方法。页面索引和页面大小在filterModel
pageIndexChanged($event: number) {
this.pageIndex = $event;
this.filterModel.pageIndex = this.pageIndex;
this.loadPage();
}
loadPage() {
this.filterModel.searchTerm = this.searchTerm;
this.stockHttpService.getList(this.filterModel).subscribe(data => {
if (this.stockHttpService.checkResponse(data)) {
this.loading = false;
this.pageTotal = data.apiResult.dataCount;
this.listData = data.apiResult.dataResult;
}
}
);
this.savePageParameter();
}