订阅 Angular 材料中 matTable 的 PageSize 和 PageIndex答案

【问题标题】：subscribe on PageSize and PageIndex of matTable in Angular material订阅 Angular 材料中 matTable 的 PageSize 和 PageIndex
【发布时间】：2020-08-01 22:05:15
【问题描述】：

我正在使用有角度的材料表和分页器。我想将 pageSize 和 pageIndex 发送到 BE，这样我就可以从 BE 进行分页，因为我们有大量数据，而这在 FE 中是不可能的。如何订阅 pageSize 更改和 PageIndex 更改，并获取用户选择的数字发送给 BE。

【问题讨论】：

这是您正在寻找的答案：stackoverflow.com/a/45685002/2976876
谢谢，我也在这里找到了答案
如果对您有帮助，请善待并投票支持我的回答。谢谢！

标签： angular angular-material

【解决方案1】：

您可以按如下方式订阅寻呼机：

@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  ],
})
export class ListComponent implements AfterViewInit {
  @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
  data: MatTableDataSource<any>;

  constructor(private http: HttpClient) {}

  ngAfterViewInit(): void {
    this.data = new MatTableDataSource([]);
    this.data.paginator = this.paginator;
    this.paginator.pageIndex = 0;

    this.paginator.page.pipe(
      startWith({}),
      switchMap(() => {
        const page = this.paginator.pageIndex + 1;
        const itemsPerPage = this.paginator.pageSize;

        return this.http.get(`api_url?page=${page}&itemsPerPage=${itemsPerPage}`);
      }),
      map((apiResponseData) => { return apiResponseData;}),
    ).subscribe((data) => {
      this.data= new MatTableDataSource(data);
      this.data._updateChangeSubscription();
    });
  }
}

【讨论】：