Angular MatTable二次删除报错this.dataArray.filter is not a function如何解决

问题原因 #

报错的核心是deleteRowData方法中，删除接口请求成功后的回调错误修改了this.dataArray的类型：
第一次删除操作时，你先通过filter方法得到新的数组赋值给this.dataArray，前端视图更新正常；但调用删除接口后，你直接将接口返回值res赋值给了this.dataArray，而你的删除接口返回的不是人员列表数组，是单个对象或操作成功标识，导致this.dataArray丢失数组类型，第二次删除调用filter方法时就会报错。

修复方案 #

方案1（推荐，无需修改后端） #

直接删除删除接口回调中对this.dataArray的赋值逻辑，因为前端已经提前完成了数据过滤更新，不需要后端再返回全量数据：

deleteRowData(row_obj: { id: number; }){
  this.dataArray = this.dataArray.filter((value: any) => {
    return value.id != row_obj.id;
  });
  this.dataSource.data = this.dataArray;

  this.subs.add(this.financeService.deleteUsers(row_obj.id)
  .subscribe(() => {
    // 删掉原来的 this.dataArray = res 即可
    // 可在此处添加删除成功提示、失败回滚等额外逻辑
  }));
}

方案2（需要后端配合） #

要求后端调整DeletePerson接口，删除成功后返回最新的全量人员列表数组，同时你需要将接口返回值的类型定义修改为数组类型。

额外优化建议 #

• 将private dataArray: any;修改为private dataArray: Element[] = [];，提前初始化空数组、明确类型，避免后续出现同类类型错误
• 删除操作按照RESTful规范建议用DELETE请求替换当前的GET请求，避免缓存或误触发问题，service代码修改参考：

deleteUsers(id: number): Observable<Element> {
  const URL = `http://192.168.1.110:8282/api/DeletePerson/${id}`;
  return this.http.delete<Element>(URL);
}

内容的提问来源于stack exchange，提问作者H Jafari