Angular Service存储的数组执行删除操作后未实时刷新该如何解决

问题根因 #

核心是异步操作执行顺序错误，其次存在控制台引用类型打印的认知偏差：

• HTTP请求是异步操作，你调用deleteCustomer时，subscribe内的数组过滤逻辑要等删除接口请求成功后才会执行，你在调用删除方法后立刻读取Service数组、打印长度，此时过滤逻辑还未触发，Service存储的数组还是删除前的旧数据。
• 数组是引用类型，浏览器控制台打印数组对象时存储的是内存引用，等你手动点开查看元素时才会加载最新值，而打印length属性时取的是执行打印动作瞬间的快照，才会出现长度和元素内容不一致的异常表现。

修复方案 #

第一步：修改Service的删除方法，返回Observable供组件感知异步完成状态 #

// CustomerServiceService 代码修改
import { tap } from 'rxjs';
import { Observable } from 'rxjs';

deleteCustomer(id: number): Observable<void> {
    this.tokenFromLS = `${localStorage.getItem('token')}`;
    const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json',
        Authorization: 'Basic ' + this.tokenFromLS,
      }),
    };
    // 移除内部订阅，返回Observable，用tap操作符在请求成功后更新Service本地数组
    return this.http
      .delete<void>(`http://127.0.0.1:8080/api/customer/${id}`, httpOptions)
      .pipe(
        tap(() => {
          this.customerList = this.customerList.filter((v) => v.id != id);
        })
      );
  }

第二步：修改组件的删除逻辑，等异步操作完成后再读取最新数组 #

// GetCustomerListComponent 代码修改
deleteCustomer(id: number) {
  this.customerService.deleteCustomer(id).subscribe({
    next: () => {
      // 接口请求成功、Service数组更新完成后再读取最新值
      this.customerList = this.customerService.getCustomerList();
      console.log(this.customerList.length);
    },
    error: (err) => {
      // 可补充删除失败的提示逻辑
      console.error('删除客户失败', err);
    }
  });
}

可选优化 #

如果想要避免每次手动拉取数组，可以将Service内的customerList改为BehaviorSubject类型，组件直接订阅它的变化，数据更新时会自动同步到视图，不需要手动调用getCustomerList刷新。

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