基于索引用splice删除行后刷新Angular Material表格问题

问题原因 #

你当前的代码存在两个核心问题：

1. 错误操作表单控件数组：直接用splice修改FormArray的controls数组，绕过了Angular表单的官方API，会破坏表单的状态管理（比如值、校验状态），同时导致变更检测失效。
2. 数组引用未更新：直接赋值this.dataSource = this.assignForm.controls时，数组引用没有变化，Angular Material表格无法感知到数据更新，自然不会刷新。

修正方案 #

1. 使用FormArray官方方法删除控件 #

Angular的FormArray提供了removeAt(index)方法来安全删除指定索引的控件，这是官方推荐的操作方式，能正确维护表单状态。

2. 触发表格数据变更 #

通过更新MatTableDataSource的data属性，或者创建新的数组引用，让表格感知到数据变化。

修正后的代码 #

情况1：assignForm本身是FormArray

import { MatTableDataSource } from '@angular/material/table';
import { FormArray } from '@angular/forms';

// 组件中定义dataSource为MatTableDataSource类型
dataSource = new MatTableDataSource<any>([]);

deleteRow(index: number) {
  console.log("called", index);
  // 明确指定为FormArray类型
  const formArray = this.assignForm as FormArray;
  // 使用官方方法删除指定索引的控件
  formArray.removeAt(index);
  // 更新表格数据源，触发刷新
  this.dataSource.data = formArray.controls;
  // 也可以通过创建新数组引用触发变更：
  // this.dataSource = new MatTableDataSource(formArray.controls);
  
  if(index === 0) {
    this.disableNext = true;
  }
}

情况2：assignForm是包含FormArray的FormGroup

如果你的表单是FormGroup，内部包含一个名为rows的FormArray：

deleteRow(index: number) {
  console.log("called", index);
  // 获取FormArray实例
  const rowsArray = this.assignForm.get('rows') as FormArray;
  rowsArray.removeAt(index);
  // 更新数据源
  this.dataSource.data = rowsArray.controls;
  
  if(index === 0) {
    this.disableNext = true;
  }
}

额外处理：手动触发变更检测 #

如果上述方案仍未生效，可以注入ChangeDetectorRef手动触发变更检测：

import { ChangeDetectorRef } from '@angular/core';

// 组件构造函数注入
constructor(private cdr: ChangeDetectorRef) {}

deleteRow(index: number) {
  // ... 上述删除和更新代码
  // 手动触发变更检测
  this.cdr.detectChanges();
}

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