带有 Http 请求的 Angular Mat 表分页页面索引答案

【问题标题】：Angular Mat table Pagination Page index with Http request带有 Http 请求的 Angular Mat 表分页页面索引
【发布时间】：2021-03-30 01:04:39
【问题描述】：

我有一个基于页码获取的 API，如何将在下一个和上一个按钮上更改的表页面索引发送到此 API 请注意我创建了一个共享表

 @Input() columns: Column[] = [];
 @Input()rows!: Row<T>[];

 @ViewChild(MatSort, { static: true }) matSort!: MatSort;
 @ViewChild(MatPaginator, { static: false }) matPaginator!: MatPaginator;
 @Input() isPageable = false;
 @Input() paginationSizes: number[] = [5, 10, 15];
 @Input() defaultPageSize = this.paginationSizes[1];
 pageNo = 0;
 @Input() PageIndex = 0;
 public dataSource = new MatTableDataSource<Row<T>>();
 public columnNames: string[] = []


 constructor(private cd: ChangeDetectorRef) { }

  ngOnInit(): void {
  this.dataSource.data = this.rows;
  this.columnNames = this.columns.map((column) => column.name.toString());
  this.dataSource.paginator = this.matPaginator;}

  ngAfterViewInit(): void {
  this.dataSource.paginator = this.matPaginator;}
 
  pageEvents(event: any) {
  console.log("PageIndex " + "=" + event.pageIndex);
  if (event.pageIndex > this.pageNo) {
  this.PageIndex = event.pageIndex
  console.log(this.PageIndex)

【问题讨论】：

标签： angular typescript pagination angular-material mat-table

【解决方案1】：

你只需要订阅 paginator.page

  ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
    this.paginator.page.subscribe(res=>{
      //res is an object like
      {length:...,pageIndex:..,pageSize:...,previousPageIndex:..}
    })
  }

注意：如果您想要一个带有过滤器/排序和分页器的复杂示例，您可以查看this SO

【讨论】：