подписаться на PageSize и PageIndex MatTable в Angular материал

Question

Я использую angular Таблица материалов и paginator. Я хочу отправить pageSize и pageIndex в BE, чтобы я мог выполнять пейджинг из BE, потому что у нас есть большие данные, и это невозможно в FE. как я могу подписаться на изменения pageSize и PageIndex и получить эти выбранные номера пользователем для отправки в BE.

Answer 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();
    });
  }
}