Angular MatPaginator点击时页码偏移问题求助

点击分页控件时出现页码偏移异常：点击第3页时本应显示41-51条数据，实际跳转至23-33条。

问题根源 #

1. 分页器每页条数动态错误绑定：mat-paginator的[pageSize]绑定了episodes.length，这会导致每次加载数据后，分页器的每页条数被替换为当前接口返回的结果数量（而非固定的20条）。比如当某一页返回11条数据时，分页器会错误认为每页只显示11条，后续页码计算完全混乱。
2. 分页器初始状态未同步：组件初始化时，分页器的pageIndex没有和组件内的page变量对齐，可能导致初始状态不一致。

修复方案 #

1. 固定分页器的pageSize值 #

修改模板中mat-paginator的pageSize绑定，从动态的episodes.length改为固定值20，和pageSizeOptions保持一致：

<ng-container *ngIf="episodes.length > 0">
  <mat-paginator class="pagination"
    (page)="handlePage($event)"
    [length]="info.count"
    [pageSize]="20"
    [pageSizeOptions]="[20]"
    aria-label="Select page">
  </mat-paginator>
</ng-container>

2. 同步分页器初始页码与组件状态 #

实现AfterViewInit钩子，在视图初始化后同步分页器的pageIndex，确保和组件内的page变量（从1开始）对应：

import { AfterViewInit } from '@angular/core';

export class EpisodePageComponent implements OnInit, AfterViewInit {
  @ViewChild(MatPaginator) paginator: MatPaginator;

  episodes: IEpisode[];
  page: number = 1;
  info: IInfo

  constructor(private activatedRoute: ActivatedRoute, private router: Router) {
  }

  ngOnInit(): void {
    this.handlePage();
  }

  ngAfterViewInit(): void {
    if (this.paginator) {
      // 分页器pageIndex从0开始，组件page从1开始，做对应转换
      this.paginator.pageIndex = this.page - 1;
    }
  }

  handlePage(event?: PageEvent) {
    if (event) {
      this.page = event.pageIndex + 1
    }

    this._setQueryPage();
    this._loadEpisodes();
  }

  _loadEpisodes(): void {
    this.activatedRoute.data.subscribe(({episode}) => {
      this.episodes = episode.results;
      this.info = episode.info;
      // 确保分页器总条数实时更新
      if (this.paginator) {
        this.paginator.length = this.info.count;
      }
    })
  }

  _setQueryPage(): void {
    const queryParams: Params = {page: this.page};
    this.router.navigate([], {
      relativeTo: this.activatedRoute,
      queryParams,
      queryParamsHandling: 'merge'
    })
  }
}

额外优化（可选） #

为了避免路由数据订阅的内存泄漏，可以添加订阅销毁逻辑：

import { Subscription } from 'rxjs';
import { OnDestroy } from '@angular/core';

export class EpisodePageComponent implements OnInit, AfterViewInit, OnDestroy {
  // ... 其他代码
  private dataSubscription: Subscription;

  _loadEpisodes(): void {
    this.dataSubscription?.unsubscribe();
    this.dataSubscription = this.activatedRoute.data.subscribe(({episode}) => {
      this.episodes = episode.results;
      this.info = episode.info;
      if (this.paginator) {
        this.paginator.length = this.info.count;
      }
    })
  }

  ngOnDestroy(): void {
    this.dataSubscription?.unsubscribe();
  }
}

内容的提问来源于stack exchange，提问作者vasdas dasda