Angular 10 执行删除操作后无需页面刷新重载数据的方案咨询

以下两种实现方案按需选择：

方案1：本地直接更新列表（性能最优） #

无需额外发起GET请求，删除成功后直接过滤掉本地列表中已删除的条目即可，响应速度最快：

// 组件中删除按钮触发逻辑
handleDeleteItem(id: number) {
  this.yourServiceName.RemoveProductFromWishlistItem(id).subscribe({
    next: () => {
      // 直接更新绑定视图的列表变量，框架响应式能力会自动刷新视图
      this.wishlistItems = this.wishlistItems.filter(item => item.id !== id);
    },
    error: (err) => console.error('删除失败，请重试', err)
  })
}

适用场景：仅当前用户操作该列表数据，无需同步其他端的最新修改。

方案2：删除后重新拉取列表（数据一致性最优） #

使用RxJS的switchMap操作符串联删除、拉取列表两个请求，完全避免嵌套subscribe：

前提：组件内已有获取列表的公共方法 #

// 组件中原有的拉取心愿单列表方法，执行后会更新绑定视图的 wishlistItems 变量
loadWishlist(): Observable<any[]> {
  return this.yourServiceName.getWishlistItems().pipe(
    tap(res => this.wishlistItems = res)
  )
}

实现删除后自动刷新列表 #

handleDeleteItem(id: number) {
  this.yourServiceName.RemoveProductFromWishlistItem(id).pipe(
    // 删除请求完成后自动切换到拉取列表的请求
    switchMap(() => this.loadWishlist())
  ).subscribe({
    error: (err) => console.error('操作失败，请重试', err)
  })
}

适用场景：列表数据可能被多端/多用户同时修改，需要保证视图展示的是服务端最新数据。

可选优化（错误场景处理） #

你当前的Service代码中用catchError吞了删除错误，即使删除接口调用失败也会返回正常流，会导致前端展示删除成功但实际服务端没删的不一致问题。如果希望删除失败时不执行后续的列表更新，可以把错误捕获移到组件侧的subscribe中处理，调整后的Service代码如下：

RemoveProductFromWishlistItem(id:number): Observable<void>{
  console.log("Remove from wishlist item");
  return this.http.delete<void>(`${this.wishlistitemUrl}/${id}`);
}

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