Ag Grid调用刷新方法时this.rowData无法清空问题求助

问题根因 #

1. 刷新方法调用时机错误 #

你提到发送订单后会调用getTable()刷新，但你提供的sendOrders代码中没有对应的调用逻辑。即便你补充了调用，直接在循环结束后执行也是错误的：this.service.sendOrder是异步请求，for循环只是触发了所有请求的发送，不会等待请求处理完成。此时立即调用getTable()，后端还未完成订单状态更新，getAllUserOrders返回的自然是旧数据。

2. 可能存在异步请求竞态 #

如果短时间多次触发getTable()，多个getAllUserOrders异步请求的返回顺序不可控，可能出现后发起的请求先返回、先更新表格，先发起的请求后返回、用旧数据覆盖新表格内容的问题。

修复方案 #

第一步：修改sendOrders逻辑，等待所有请求完成后再刷新 #

你用的是RxJS异步流，可以用forkJoin组合所有发送请求，全部成功后再调用getTable()：

import { forkJoin } from 'rxjs';

sendOrders(event: any): void {
  // 组合所有发送订单的请求
  const sendRequests = this.selectedOrderRows.map(item => {
    console.log('ITEM:', item);
    return this.service.sendOrder(item);
  });

  forkJoin(sendRequests).subscribe(responses => {
    // 所有请求都成功返回后再刷新表格
    if (responses.every(res => res.status === 200)) {
      console.log('所有订单发送成功');
      this.getTable();
    }
  });
}

第二步：优化getTable逻辑，避免竞态问题 #

可以用RxJS的switchMap自动取消前一次未完成的查询请求，避免旧请求覆盖新数据：

// 先定义一个刷新触发器
private refreshTrigger = new Subject<void>();

ngOnInit() {
  // 订阅刷新事件，用switchMap处理请求竞态
  this.refreshTrigger.pipe(
    switchMap(() => this.service.getAllUserOrders())
  ).subscribe(response => {
    if (response.status === 200) {
      // 直接生成新数组，不需要先清空再push
      this.rowData = response.body.map(item => ({
        number: item.order_number,
        status: item.status,
        service: item.deal_type,
        delivery: item.delivery_type,
        ttn: '',
        sender: item.sender_name,
        recipient: item.recipient_name,
        place: item.delivery_placing_type,
        amount: item.amount_packages,
        address1: item.sender_address,
        date1: item.sender_delivery_from.split(' ')[0],
        time11: item.sender_delivery_from.split(' ')[1],
        time12: item.sender_delivery_to.split(' ')[1],
        address2: item.recipient_address,
        date2: item.recipient_accept_from.split(' ')[0],
        time21: item.recipient_accept_from.split(' ')[1],
        time22: item.recipient_accept_to.split(' ')[1],
        author: item.userId,
        id: item.id
      }));
      this.gridApi.setRowData(this.rowData);
    }
  });
}

getTable(): void {
  // 触发刷新即可
  this.refreshTrigger.next();
}

补充说明 #

你之前尝试的清空rowData操作本身没有问题，Ag Grid的setRowData是全量替换行数据，只要传入的rowData是最新的，表格会自动更新。你看到的旧数据本质是因为查询请求返回的是未更新的旧内容，不是数组清空操作失效。

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