MatTableDataSource添加新记录后无法自动刷新表格的问题求助

嘿，我看你遇到的问题是提交新工单后，MatTable没有自动刷新对吧？让我帮你揪出问题根源并搞定它～

问题分析 #

先看你Service里的postWorkOrder方法：你在POST请求成功后调用了this.wobSubject$.next(data);，但这里的data是后端返回的单个新工单对象，而你的wobSubject$定义的是BehaviorSubject<IWorkOrders[]>（数组类型）！

之前getWorkOrder返回的是完整工单数组，组件里的订阅者期望收到数组格式的数据，但POST后你传了单个对象，这就导致组件里的this.dataSource.data = data其实把单个对象赋值给了需要数组的数据源——表格自然没法正确渲染，更不会触发重载了。

解决方案 #

这里给你两种靠谱的处理方式，选哪种看你的业务需求：

方式一：提交成功后重新拉取完整列表（简单稳妥）

这种方式不用手动处理数组，直接复用已有的getWorkOrder方法重新获取最新数据，确保数据完全同步：

// Service.ts 里修改postWorkOrder方法
postWorkOrder(workOrder: IWorkOrders) {
  this.http.post<IWorkOrders>(this.BASE_URL + '/addworkorder/', workOrder)
    .subscribe((data: any) => {
      // 提交成功后重新调用获取列表的方法
      this.getWorkOrder();
    });
}

方式二：手动将新工单加入现有数组（减少一次请求）

如果后端返回的是新增的单个工单对象，你可以把它加到当前Subject的数组里，注意要创建新数组（用扩展运算符），因为Angular的变更检测对引用类型的数组，只有当引用变化时才会触发更新：

// Service.ts 里修改postWorkOrder方法
postWorkOrder(workOrder: IWorkOrders) {
  this.http.post<IWorkOrders>(this.BASE_URL + '/addworkorder/', workOrder)
    .subscribe((newWorkOrder: IWorkOrders) => {
      // 获取当前Subject中的已有数据，加入新工单后生成新数组
      const currentOrders = this.wobSubject$.value;
      this.wobSubject$.next([...currentOrders, newWorkOrder]);
    });
}

验证效果 #

修改完成后，当你提交新工单，wobSubject$会正确推送数组格式的数据，组件里的订阅者收到数据后赋值给dataSource.data，MatTable就会自动重载显示最新的工单列表啦～

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