首页 > 解决方案 > ngx-datatable 对分页的双重初始调用

问题描述

这是我使用 ngx-datatable 的实现

html

<ngx-datatable
  class="table-base table-base_border clickable-list"
  [rows]="tickets"
  [headerHeight]="30"
  [footerHeight]="50"
  [columns]="columns"
  [columnMode]="'flex'"
  [externalPaging]="true"
  [count]="page.totalElements"
  [offset]="page.pageNumber"
  [limit]="page.size"
  [rowHeight]="40"
  (page)="onPageChange($event)"
  [externalSorting]="true"
  [selectionType]="'single'"
  [messages]="messages | async"
  (select)="onSelect($event)"
  [scrollbarV]="true"
  [scrollbarH]="false"
  [virtualization]="false"
  ></ngx-datatable>

.ts

ngOnInit(): void {
  this.onPageChange({ offset: 0 });
}

onPageChange(pageInfo: any): void {
  this.page.pageNumber = pageInfo.offset;
  this.gridQuery.page.size = this.page.size;
  this.gridQuery.page.pageNumber = pageInfo.offset + 1;

  this.getData();
}

问题是getData()两次,就像数据表总是onPageChange()在组件加载后调用。

如何防止双重调用getData()

标签: angularngx-datatable

解决方案


问题是 getData() 两次,就像数据表在组件加载后总是调用 onPageChange() 一样。

您不需要在 ngOnInit 中调用 onPageChange。如您所见,数据表已经调用它。


推荐阅读