Angular table 在分页时调用 api

Question

我有一个 table return 来自 API url 的数据，默认情况下数据是从服务器分页的。当我点击来自服务器的页面 2、3、etc. 和 return 数据时，我想调用新数据。

I am using ant design for my table and to be honest I don't really understand their callback methods in documents, so I'm looking for help to make this happen. documents

代码

Script

listOfData: DataItem[] = []
limit = ''
page = ''
pages = ''

ngOnInit(): void {
  this.getList();
}

getList() {
  this.helpdeskService.getList().subscribe((res) => {
      this.listOfData = res.data;

      this.limit = res.limit //10
      this.page = res.page  //1
      this.pages = res.pages  //2

      if(this.listOfData.length > 0){
        this.isSpinning = false;
      } else {
        this.isSpinning = true;
      }
  },
  (error) => {
    console.log('data', error)
  });
}

HTML

<ng-template #rangeTemplate let-range="range" let-total>Display {{ range[1] }} of {{ total }} items </ng-template>
<nz-table
  #filterTable
  nzShowSizeChanger
  (nzCurrentPageDataChange)="onCurrentPageDataChange($event)"
  [nzData]="listOfData" class="kit__utils__table mb-4"
  [nzPageSizeOptions]="[5, 10, 20, 30, 40]"
  [nzPageSize]="limit"
  [nzPageIndex]="page"
  [nzShowTotal]="rangeTemplate">
  <thead>
  //...
  </thead>
  <tbody>
    ..//
  </tbody>
</nz-table>

有什么想法吗？

Answer 1

需要添加pageIndex变化时的回调

将 [nzTotal]="totalPages" (nzPageIndexChange)="onPageIndexChange($event)"添加到模板

html

<ng-template #rangeTemplate let-range="range" let-total>Display {{ range[1] }} of {{ total }} items </ng-template>
<nz-table
  #filterTable
  nzShowSizeChanger
  (nzCurrentPageDataChange)="onCurrentPageDataChange($event)"
  (nzPageIndexChange)="onPageIndexChange($event)"
  [nzData]="listOfData" class="kit__utils__table mb-4"
  [nzPageSizeOptions]="[5, 10, 20, 30, 40]"
  [nzPageSize]="limit"
  [nzPageIndex]="page"
  [nzTotal]="totalPages"
  [nzFrontPagination]="false" 
  [nzShowPagination]="true" 
  [nzShowTotal]="rangeTemplate">
  <thead>
  //...
  </thead>
  <tbody>
    ..//
  </tbody>
</nz-table>

将此添加到 ts 文件

getList(pageIndex: number | null): Observable < any > {
  const endpoint=pageIndex? `${this.env.HELPDESK_LIST}?start=${pageIndex}&limit=5`: this.env.HELPDESK_LIST
  const tokenPromise =
    this.token === undefined
      ? store.get('accessToken')
      : Promise.resolve(this.token);

  return from(tokenPromise).pipe(
    switchMap((token) => {
      this.token = this.token;
      const httpOptions = {
        headers: new HttpHeaders({
          Accept: 'application/json, text/plain',
          'Content-Type': 'application/json',
          Authorization: 'Token ' + this.token,
        }),
      };
      return this.http
        .get(endpoint, httpOptions)
        .pipe(map((data) => data));
    })
  );
}

getList(pageIndex) {
  this.helpdeskService.getList(pageIndex).subscribe((res) => {
      this.listOfData = res.data;

      this.limit = res.limit //10
      this.page = res.page  //1
      this.totalPages = res.total
      this.pages = res.pages  //2

      if(this.listOfData.length > 0){
        this.isSpinning = false;
      } else {
        this.isSpinning = true;
      }
  },
  (error) => {
    console.log('data', error)
  });
}
onPageIndexChange(pageIndex: number | null){
    console.log(pageIndex) // get you the page index
    // make api call requesting data for only that page index
   this.getList(pageIndex)

  }

Angular table 在分页时调用 api

Angular table call api on pagination

javascript

angular

typescript

ant-design-pro

代码