分页上的角度表调用api

Question

我有一个从 API url 返回数据的表，默认情况下数据是从服务器分页的。我想在点击页面2、3、etc.时调用新数据并从服务器返回这些页面的数据。

我正在为我的表使用 ant 设计，老实说，我并不真正了解他们在文档中的回调方法，所以我正在寻求帮助来实现这一点。 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变化时需要添加Callback

在模板中添加 [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)

  }