Angular 8删除MatTable选中行报错：this.dataSource.findIndex不是函数

嘿，我来帮你搞定这个报错！咱们先弄明白问题出在哪：

错误原因 #

你写的代码里直接调用this.dataSource.findIndex()，但this.dataSource是MatTableDataSource的实例，不是普通的JS数组，findIndex是数组的专属方法，所以自然会报错啦。MatTableDataSource把实际的数据存在它的data属性里，咱们得操作这个属性才行。

修正后的完整代码 #

removeSelectedRows() {
  // 先把数据源数组复制一份，避免遍历删除时索引混乱
  let updatedData = [...this.dataSource.data];

  this.selection.selected.forEach(selectedItem => {
    // 在复制后的数组里找选中项的索引
    const itemIndex = updatedData.findIndex(dataItem => dataItem === selectedItem);
    // 确认找到有效索引再执行删除
    if (itemIndex !== -1) {
      updatedData.splice(itemIndex, 1);
    }
  });

  // 更新数据源，两种方式选一种就行
  this.dataSource.data = updatedData;
  // 或者用你原来的写法：this.dataSource = new MatTableDataSource<Element>(updatedData);
}

几个小提醒 #

• 为什么要复制数组？因为如果直接在原数组上边遍历边删除，数组长度变化会导致索引错位，可能会漏删某些选中的行。复制一份再操作就不会有这个问题啦。
• 不用在每次循环里都重新实例化MatTableDataSource，等所有删除操作完成后一次性更新数据源就够了，这样性能更优。
• 确认你的Element类型是正确的数据模型，别出现类型不匹配的情况哦。

内容的提问来源于stack exchange，提问作者Maria Gálvez