我正在使用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在版本8上开始无法像以前一样工作 当按第二页时,nz-pagination显示数据来自API,但页面未刷新。所有数据都属于第1页
我还添加了pageIndexchange和load数据方法。 页面索引和页面大小在 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();
}