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

Question

这是一个 Angular 8 应用程序。 它有一个带有 mat-paginator 的表格。

<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 页的表格中。它没有导航到第一页。谁能告诉我如何重定向到第一页。

谢谢

Answer 1

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

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

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