Angular mat-table使用trackBy后首行无法编辑的问题咨询

这个需求完全可以实现，并未超出Angular Mat-Table的能力范围，问题出在你的trackBy函数实现上，以下是具体分析和解决方案：

问题根源 #

你的trackByTest函数返回的是行数据中的hiddenTest字段值，当新增行时，如果新行的hiddenTest与首行值相同（比如初始都是空字符串），Angular变更检测会判定这些行是同一个对象，复用首行的组件实例，导致首行的FormControl被错误关联，加上你使用了OnPush变更检测策略，组件不会主动刷新，最终造成首行无法修改的问题。

另外，你的trackBy函数参数命名存在混淆：第二个参数是行数据对象，而非列，命名为column会误导逻辑判断。

解决方案 #

1. 修正TrackBy函数（核心） #

trackBy必须返回每行的唯一标识，推荐两种实现方式：

方式一：使用行索引（简单场景）

适用于不会对行进行删除、排序操作的场景：

trackByTest(index: number, row: any): number {
  return index;
}

方式二：使用唯一ID（推荐）

给每行数据添加唯一ID，确保无论行如何操作，Angular都能准确区分：

• 新增行时生成唯一ID：

addRow() {
  const newRow = {
    inputTest: '',
    hiddenTest: '',
    id: `${Date.now()}-${Math.random().toString(36).slice(2)}` // 生成唯一标识
  };
  // 不可变更新数组，触发OnPush变更检测
  this.dataList = [...this.dataList, newRow];
}

• 对应的trackBy函数：

trackByTest(index: number, row: any): string {
  return row.id;
}

2. 用FormArray管理表单（推荐） #

使用Angular响应式表单的FormArray管理所有行的表单控件，确保每行的FormControl完全独立，避免关联冲突：

// 初始化表单数组，包含默认首行
formArray = new FormArray([
  new FormGroup({
    inputTest: new FormControl(''),
    hiddenTest: new FormControl('')
  })
]);

// 新增行表单
addRow() {
  this.formArray.push(
    new FormGroup({
      inputTest: new FormControl(''),
      hiddenTest: new FormControl('')
    })
  );
}

模板中绑定FormArray：

<tr mat-row *matRowDef="let row; columns: tableConfig?.columns; let i = index;">
  <!-- 单元格绑定对应FormControl -->
  <td mat-cell *matCellDef="let row">
    <input [formControl]="formArray.at(i).get('inputTest')">
  </td>
</tr>

3. 配合OnPush变更检测 #

确保数据更新时采用不可变操作（比如用扩展运算符创建新数组），或者依赖FormArray的内置变更通知机制，让OnPush组件能检测到数据变化。

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