MatPaginator分页后表格序号显示错误的解决咨询

方法一：模板中直接结合分页器属性计算 #

首先确保TS中paginator是可被模板访问的公共变量：

import { MatPaginator } from '@angular/material/paginator';
import { ViewChild } from '@angular/core';
// ...其他导入

export class YourComponent {
  paginator: MatPaginator | undefined;
  // ...其他变量

  @ViewChild(MatPaginator) set matPaginator(paginatorValue: MatPaginator) {
    if (paginatorValue !== undefined && this.dataSource) {
      this.paginator = paginatorValue;
      this.dataSource.paginator = paginatorValue;
    }
  }
}

然后修改表格序号列的模板代码，结合分页器的pageIndex和pageSize计算全局序号：

<ng-container matColumnDef="sequence">
  <th mat-header-cell *matHeaderCellDef class="table-header-cell" scope="col"> Sequence </th>
  <td mat-cell *matCellDef="let element; let i = index"
      matTooltip="{{ (paginator?.pageIndex || 0) * (paginator?.pageSize || 3) + i + 1 }}">
    {{ (paginator?.pageIndex || 0) * (paginator?.pageSize || 3) + i + 1 }}
  </td>
</ng-container>

这里用可选链?.和默认值|| 0/||3，避免分页器未初始化时出现错误。

方法二：自定义管道计算全局序号 #

创建一个专门计算全局序号的管道，让模板更简洁：

// global-index.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';

@Pipe({ name: 'globalIndex' })
export class GlobalIndexPipe implements PipeTransform {
  transform(index: number, paginator: MatPaginator): number {
    const pageIndex = paginator?.pageIndex || 0;
    const pageSize = paginator?.pageSize || 3;
    return pageIndex * pageSize + index + 1;
  }
}

在组件所属的模块中声明这个管道：

import { NgModule } from '@angular/core';
import { GlobalIndexPipe } from './global-index.pipe';
// ...其他导入

@NgModule({
  declarations: [
    YourComponent,
    GlobalIndexPipe
  ],
  // ...其他配置
})
export class YourModule { }

然后在模板中使用管道：

<ng-container matColumnDef="sequence">
  <th mat-header-cell *matHeaderCellDef class="table-header-cell" scope="col"> Sequence </th>
  <td mat-cell *matCellDef="let element; let i = index"
      matTooltip="{{ i | globalIndex: paginator }}">
    {{ i | globalIndex: paginator }}
  </td>
</ng-container>

方法三：给原始数据添加全局序号字段 #

如果不想依赖分页器状态，可以在加载数据时给每个元素添加全局序号字段：

// 假设rawData是从接口或其他地方获取的原始数据数组
this.reviewScheduleData = rawData.map((item, globalIndex) => ({
  ...item,
  sequence: globalIndex + 1
}));
this.dataSource = new MatTableDataSource(this.reviewScheduleData);

然后模板中直接使用元素的sequence属性：

<ng-container matColumnDef="sequence">
  <th mat-header-cell *matHeaderCellDef class="table-header-cell" scope="col"> Sequence </th>
  <td mat-cell *matCellDef="let element"
      matTooltip="{{ element.sequence }}">
    {{ element.sequence }}
  </td>
</ng-container>

这种方法适合数据量不大的场景，无需依赖分页器的状态变化。

内容的提问来源于stack exchange，提问作者Neil Harris