时间戳

首页 > 解决方案 > 在Angular中搜索时如何转到表格的第一页？

typescript - 在Angular中搜索时如何转到表格的第一页？

问题描述

这是一个 Angular 8 应用程序。它有一张带垫子分页器的桌子。

<mat-paginator [pageSize]="commonPageSize" [length]="totalElements"
                   (page)="getData($event.pageIndex, this.isSearch, this.key, this.value)" showFirstLastButtons></mat-paginator>

我从每次下一页点击的 API 调用中获取数据

(page)="getData($event.pageIndex, this.isSearch, this.key, this.value)"

pageSize 始终为 10，每个 API 调用我检索 10 行。下面是我的 ts 文件。

  getData(pageNumber: number, isSearch: string, key: string, value: string) {
if (this.subscription) {
  this.subscription.unsubscribe();
}

this.subscription = this.service.getData(pageNumber.toString(), this.commonPageSize,
  isSearch, key, value)
  .subscribe(
    data => {
      if(data.length !== 0) {
        this.isDownloadCsvBtnEnable = false;
      }
      if(this.totalElements == null && data.length > 0) {
        this.totalElements = parseInt(data[0].totalElements,10 );
      }
      this.data= new MatTableDataSource(data);
      this.number = this.data.connect().pipe(map((data: any) => data.length === 0));
      this.data.sort = this.sort;
    }
  );

}

问题是假设我在第 3 页并传递值进行搜索。然后表格不会转到第一页。搜索到的数据已加载到第 3 页的表中。它没有导航到第一页。任何人都可以告诉我如何重定向到第一页。

谢谢

标签： typescriptangular8mat-tablepaginator

解决方案

在 Angular Material 文档中有一个如何做到这一点的例子。

https://stackblitz.com/angular/gxxgljxnpbb?file=src%2Fapp%2Ftable-overview-example.ts

基本上，您需要使用 ViewChild 来获取对组件中分页器的引用。然后，每当更改过滤器时，您都可以告诉分页器转到第一页。

推荐阅读