Angular Material分页器切换页码时序号重置问题求助

问题分析 #

你当前用{{ i + 1 }}生成的序号是当前页面内的局部索引，切换分页后局部索引会从0重新开始，所以序号会重置为1。要实现全局连续的序号，需要结合分页器的pageIndex（当前页码，从0开始）和pageSize（每页条数）来计算。

解决方案 #

1. 修改模板中的序号计算逻辑 #

把position列的td内容修改为：

<td mat-cell *matCellDef="let element; index as i">
  {{ (paginator.pageIndex * paginator.pageSize) + i + 1 }}
</td>

计算逻辑：当前页码×每页条数 + 当前页内索引 + 1，直接得到全局连续的序号。

2. 确保模板能访问到paginator实例 #

在组件类中，将@ViewChild(MatPaginator)修饰的属性改为公共属性，让模板可以直接调用：

@ViewChild(MatPaginator) public paginator: MatPaginator;

3. 修复取消邀请方法的索引问题（额外必改项） #

你当前的cancelInvite(i)用的是页面内的局部索引，分页后这个索引和invitedUsers数组的全局索引不匹配，会导致操作错误。建议通过元素的唯一标识（比如email）查找全局索引：

模板修改：

<td mat-cell *matCellDef="let element">
  <button class="mx-4" (click)="cancelInvite(element.email)">
    <span class="material-symbols-outlined">cancel</span>
  </button>
</td>

组件方法修改：

cancelInvite = (email: string) => {
  const dialogRef = this._fuseConfirmationService.open({
    title: 'Cancel Invitation',
    message: 'Are you sure to Cancel the Invitation ?',
    icon: {
      show: true,
      name: 'heroicons_outline:exclamation',
      color: 'warn',
    },
    actions: {
      confirm: {
        show: true,
        label: 'Yes',
        color: 'warn',
      },
      cancel: {
        show: true,
        label: 'No',
      },
    },
    dismissible: true,
  });
  dialogRef.afterClosed().subscribe((result) => {
    if (result == 'confirmed') {
      const globalIndex = this.invitedUsers.findIndex(user => user.email === email);
      if (globalIndex !== -1) {
        this.filterStatus = this.invitedUsers[globalIndex];
        this.updatedStatus = {
          ...this.filterStatus,
          status: 'Cancelled',
        };
        this.invitedUsers.splice(globalIndex, 1, this.updatedStatus);
        localStorage.setItem('InvitedUsers', JSON.stringify(this.invitedUsers));
        // 更新数据源刷新表格
        this.dataSource.data = this.invitedUsers;
        this._toastr.success('Successfully', 'Cancelled Invitation');
        this.router.navigate(['/user-manage']);
      }
    }
  });
};

补充说明 #

• 分页器的pageSize或pageIndex变化时，序号会自动重新计算，无需额外监听。
• 排序操作后，序号依然会基于当前分页和排序后的结果正确计算。

内容的提问来源于stack exchange，提问作者Joshua Johnson