如何不触发HTTP请求过滤Observable实现网格删除数据更新？

问题分析 #

你当前的实现中，gridData$直接绑定HTTP请求的Observable，每次重新赋值或订阅时都会触发新请求。使用shareReplay的方式不对——因为每次删除操作都重新创建了Observable，导致之前的缓存失效，仍会发起新请求。

方案一：本地变量+BehaviorSubject管理数据 #

这是最直观的方案，将数据存储在本地，用BehaviorSubject维护状态，删除时直接更新本地数组并推送新状态，不会触发额外HTTP请求：

组件代码 #

import { BehaviorSubject } from 'rxjs';
// 假设User是你的用户类型定义
interface User {
  userId: number;
  // 其他字段
}

export class YourComponent {
  // 用BehaviorSubject存储用户列表，初始为空数组
  private usersSubject = new BehaviorSubject<User[]>([]);
  // 暴露给模板的Observable
  gridData$ = this.usersSubject.asObservable();

  constructor(private userService: UserService) {}

  ngOnInit() {
    // 初始化时仅发送一次HTTP请求
    this.userService.getUsers().subscribe(users => {
      this.usersSubject.next(users);
    });
  }

  onDeleteUser(userId: number) {
    // 先调用后端删除接口（如果需要），成功后更新本地数据
    this.userService.deleteUser(userId).subscribe(() => {
      const currentUsers = this.usersSubject.value;
      // 过滤掉已删除的用户
      const updatedUsers = currentUsers.filter(user => user.userId !== userId);
      // 推送更新后的数组
      this.usersSubject.next(updatedUsers);
    });
  }
}

模板代码 #

保持不变：

[kendoGridBinding]="(gridData$ | async)!"

方案二：用RxJS扫描操作符管理数据流 #

如果更倾向于响应式编程的方式，可以用scan操作符结合删除事件的Observable，全程用流维护数据状态，无需本地变量：

组件代码 #

import { Subject, switchMap, scan, startWith, shareReplay } from 'rxjs';

export class YourComponent {
  // 用于触发删除事件的Subject
  private deleteUser$ = new Subject<number>();
  gridData$: Observable<User[]>;

  constructor(private userService: UserService) {}

  ngOnInit() {
    // 初始数据Observable
    const initialUsers$ = this.userService.getUsers();

    // 合并初始数据与删除事件，用scan累积状态
    this.gridData$ = initialUsers$.pipe(
      switchMap(initialUsers => 
        this.deleteUser$.pipe(
          // 每次删除事件触发时，过滤数组
          scan((users, deletedId) => users.filter(u => u.userId !== deletedId), initialUsers),
          // 初始时先推送原始数据
          startWith(initialUsers)
        )
      ),
      // 缓存最新数据，避免重复订阅触发HTTP请求
      shareReplay(1)
    );
  }

  onDeleteUser(userId: number) {
    this.userService.deleteUser(userId).subscribe(() => {
      // 触发删除事件，通知数据流更新
      this.deleteUser$.next(userId);
    });
  }
}

模板代码 #

同样保持不变：

[kendoGridBinding]="(gridData$ | async)!"

为什么你的原有方案无效 #

你每次删除时重新赋值gridData$ = this.gridData$.pipe(...)，相当于创建了一个新的Observable。而原始的gridData$是HTTP请求的Observable，每次新订阅（比如async管道）都会重新发起请求，shareReplay在这里无法复用之前的缓存，因为Observable已经被重新创建了。

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