带有服务器端分页的Mat表-Angular

Question

我正在处理一个通用的mat-table，我们可以将数据传递给该表组件，该组件将向用户显示数据并应处理服务器端分页。

从同一表组件调用服务时，它工作正常，

但是，当分页器更改时，使用输出事件发射器从表向父组件发送事件时，该事件应调用方法，该方法应调用服务，该服务将获取下一页记录并将其传递给用户可以在其中使用的表组件查看下一组记录。

表组件

 ngAfterViewInit(){
      merge(this.paginator.page)
      .pipe(
        startWith({}),
        switchMap(() => {
          const obj = {
            pageNumber: this.paginator.pageIndex,
            pageSize: this.paginator.pageSize,
          };
          this.pageEvent.emit(obj); --> emitting event using event emiiter

          return [];
        }),
        map((data) => {
          console.log(data);
          this.tableData = data;

          return data;
        }),
        catchError(() => {
          return observableOf([]);
        }),
        )
        .subscribe((data: any) => {

         });
       } 

应用程序支持的HTML

<app-table [displayedColumns]="data" [tableData]="tableData" 
 (pageEvent)="paginator($event)"></app-table>

app组件ts

paginator(event)
      {
       console.log(event)
       this.pageCount=event.pageNumber+1;
       this.getData(this.pageCount)
      }

预先感谢

stackblitz：https://stackblitz.com/edit/angular-yr45pl
角度示例：https://stackblitz.com/angular/mgjkylrpgjp