Angular Material表格使用index+1计算序号时出现NaN如何解决？

问题产生原因 #

• 数据源未完成初始化就触发渲染：如果dataSource是异步请求获取的（比如从后端接口拉取数据），组件首次渲染时dataSource为空或者未赋值，此时index变量会为undefined，undefined + 1运算结果自然为NaN。
• 同名列定义冲突：测试代码中存在两个matColumnDef均为sl的<ng-container>，重复的列定义会导致表格内部索引计数逻辑异常，无法正确生成数字类型的index值。
• 使用了自定义trackBy函数返回非数字值：如果给mat-table配置了trackBy函数，函数返回值如果是字符串、对象或者undefined，也会导致索引变量i不是数字类型。
• 开启分页/过滤/排序后未关联索引逻辑：如果用了mat-paginator分页组件，*matCellDef里的index是当前页内的偏移量，当分页器未正确绑定到MatTableDataSource时，也可能出现索引取值异常。

修复方案 #

1. 优先解决重复列定义问题 #

删除其中一个重复的matColumnDef="sl"的列定义，确保所有列的matColumnDef值唯一，这是最优先排查的点。

2. 给索引增加空值兜底判断 #

直接在模板里对i做非空判断和类型兜底，避免undefined参与运算：

<ng-container matColumnDef="sl">
  <th mat-header-cell *matHeaderCellDef mat-sort-header style="text-align: center;"> SL No.</th>
  <td mat-cell *matCellDef="let element; let i = index;" style="text-align: center; padding-right: 3px;">
    {{ (i || 0) + 1 }}
  </td>
  <td mat-footer-cell *matFooterCellDef style="color: white; border: none;"></td>
</ng-container>

Angular 12及以上版本可以用可选链+空值合并运算符简化写法：{{ (i ?? 0) + 1 }}。

3. 确保数据源初始化完成后再渲染表格 #

给mat-table加*ngIf判断，等数据源赋值完成后再渲染组件：

<!-- 数据源为MatTableDataSource类型的判断逻辑 -->
<table mat-table [dataSource]="dataSource" *ngIf="dataSource?.data.length">
  <!-- 列定义内容 -->
</table>

如果是普通数组类型的数据源，判断逻辑调整为：*ngIf="dataSource.length"。

4. 检查trackBy函数和分页器配置 #

如果用了trackBy，确保返回值是数字类型的索引：

trackByIndex(index: number, item: any): number {
  return index;
}

如果用了分页组件，确保分页器已经正确绑定到数据源：

@ViewChild(MatPaginator) paginator!: MatPaginator;

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

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