Angular Material：如何获取数据表格中当前行的索引

嘿，这个问题我之前也碰到过！Angular Material的MatTable在处理排序、筛选、分页后，直接拿行索引确实会有点迷惑，因为默认的index只是当前页的局部索引。不过别担心，有两种常见的位置需求，我分别给你讲清楚解决方案：

一、获取当前分页页面内的行位置 #

这个最简单，直接在mat-row的模板变量里拿到局部索引就行：

模板代码 #

<table mat-table [dataSource]="dataSource" matSort matSortActive="name" matSortDirection="asc">
  <!-- 这里是你的列定义示例 -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> 名称 </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>

  <!-- 行定义，通过`let i = index`拿到当前页内的索引 -->
  <tr mat-row *matRowDef="let row; columns: displayedColumns; let i = index;" 
      (click)="onRowClicked(row, i)"></tr>
</table>

<mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>

组件逻辑 #

在点击事件里直接使用这个局部索引：

onRowClicked(row: YourDataType, pageLocalIndex: number) {
  // 当前页内的位置（从0开始计数）
  console.log('当前页内索引：', pageLocalIndex);
  // 转换成人类习惯的1开始计数
  console.log('当前页内位置：', pageLocalIndex + 1);
}

二、获取经过排序/筛选后的全局数据集行位置 #

如果需要知道这一行在所有排序、筛选之后的完整数据集里的位置（比如第12条数据），就得借助MatTableDataSource的filteredData属性：

组件逻辑步骤 #

1. 确保你的数据源是MatTableDataSource，并且已经绑定了paginator和sort
2. 在点击事件中，通过行数据的唯一标识（比如id）在filteredData中找到对应的全局索引

import { Component, ViewChild } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';

// 定义你的数据类型
interface YourDataType {
  id: number; // 必须有唯一标识
  name: string;
  // 其他字段...
}

@Component({
  selector: 'app-your-table-component',
  templateUrl: './your-table-component.component.html',
  styleUrls: ['./your-table-component.component.css']
})
export class YourTableComponent {
  displayedColumns: string[] = ['name'];
  dataSource = new MatTableDataSource<YourDataType>([]);
  
  @ViewChild(MatPaginator) paginator!: MatPaginator;
  @ViewChild(MatSort) sort!: MatSort;

  ngAfterViewInit() {
    // 绑定分页和排序到数据源
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }

  onRowClicked(row: YourDataType, pageLocalIndex: number) {
    // 1. 获取全局索引（排序/筛选后的数据集里的位置，从0开始）
    const globalIndex = this.dataSource.filteredData.findIndex(item => item.id === row.id);
    
    if (globalIndex !== -1) {
      console.log('排序/筛选后的全局索引：', globalIndex);
      console.log('全局位置（1开始计数）：', globalIndex + 1);
    }

    // 2. 额外：获取当前行在分页中的全局序号（比如第2页第3行 → 第13条）
    const globalPagePosition = this.paginator.pageIndex * this.paginator.pageSize + pageLocalIndex + 1;
    console.log('分页后的全局序号：', globalPagePosition);
  }

  // 示例：设置表格数据
  loadData(data: YourDataType[]) {
    this.dataSource.data = data;
  }
}

关键注意事项 #

• 必须使用filteredData而不是原始的data属性，因为filteredData是经过排序、筛选后的最终数据集，而data是未处理的原始数据
• 如果你的数据没有唯一标识（比如id），不要直接用findIndex(item => item === row)，因为对象引用可能不一致，最好添加唯一标识字段
• 确保paginator和sort已经在ngAfterViewInit中完成绑定，否则filteredData不会随操作更新

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