Angular如何实现点击按钮添加与当前行属性相同的新行？

你现有代码的核心问题如下：

• 没有获取点击行对应索引的源数据，仅创建了空的IWorkItem对象，不符合「复制完全相同属性行」的需求，也可能因为空对象不符合IWorkItem类型约束触发报错
• splice(0)会直接清空原dataSource.data数组，属于逻辑误操作
• 无需每次复制都重新实例化MatTableDataSource，直接修改数据源数组后更新即可，性能更好也符合Angular Material Table的使用规范

HTML（可选优化：更换为更语义化的复制图标） #

<button mat-icon-button *ngIf="userRights.CanChangeWorkItem && isInEditableState"
(click)="copyWorkItem(i)">
<mat-icon>content_copy</mat-icon>
</button>

TS代码 #

dataSource: MatTableDataSource<IWorkItem>;
copyWorkItem(index: number){
  // 1. 获取当前点击行的源数据
  const sourceItem = this.dataSource.data[index];
  // 2. 拷贝数据：如果IWorkItem全是基础类型用扩展运算符浅拷贝即可，有引用类型属性请换用深拷贝方法
  const copyItem = {...sourceItem};
  // 3. 生成新的数据源数组（不要直接修改原data数组，避免变更检测失效）
  const newData = [...this.dataSource.data];
  // 如果你需要把复制行插到原行下方，就用splice(index+1, 0, copyItem)，现在是保持你原有逻辑插在列表开头
  newData.unshift(copyItem);
  // 4. 直接更新dataSource的data属性即可，无需重新实例化
  this.dataSource.data = newData;
  // 如果你是插到原行下方，这里EditIndex设为index+1即可
  this.EditIndex = 0;
}

如果你的IWorkItem接口包含对象、数组等引用类型的属性，浅拷贝会导致新行和原行的引用属性指向同一块内存地址，修改其中一个会影响另一个，此时请自行实现深拷贝逻辑，或者用structuredClone()原生方法做深拷贝：

const copyItem = structuredClone(sourceItem);

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