Angular中为mat-row的tr设置行号ID显示undefined求助

问题排查及修复步骤 #

1. 检查索引变量的正确性 #

Angular Material的*matRowDef里，获取行索引有两个可用变量：

• index：对应原始数据的全局索引（不受分页影响，从0开始递增）
• dataIndex：对应当前分页页内的局部索引（每页从0重新开始计数）

如果你的代码里dataIndex返回undefined，先确认Angular Material版本是否在7.x以下——旧版本不支持dataIndex，换成index试试：

<tr mat-row *matRowDef="let row; columns: _columns; let i = index;" [id]="i"></tr>

2. 确认数据源已正确初始化 #

如果表格绑定的数据源是空数组或未正确赋值，索引变量自然会是undefined。检查组件类里的数据源配置：

// 组件类示例代码
_columns = ['your-column-names']; // 确保列数组正确定义
_dataSource = new MatTableDataSource(yourActualData); // yourActualData不能是空数组或未定义

3. 给ID加前缀（更规范的做法） #

HTML规范里ID最好不要以纯数字开头，建议给行ID加个前缀，同时也能避免潜在的类型问题：

<tr mat-row *matRowDef="let row; columns: _columns; let i = index;" [id]="'table-row-' + i"></tr>

生成的ID会是table-row-0、table-row-1这类格式，更符合HTML标准。

4. 分页器关联问题（如果使用了分页） #

要是表格搭配了<mat-paginator>，必须在组件里把数据源和分页器关联起来，否则dataIndex无法正确获取分页后的行号：

import { MatPaginator } from '@angular/material/paginator';
import { ViewChild } from '@angular/core';

// 组件类内代码
@ViewChild(MatPaginator) paginator!: MatPaginator;

ngAfterViewInit() {
  this._dataSource.paginator = this.paginator;
}

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