RxJS combineLatest无法捕获Subject最后一次发射值问题

问题场景 #

在Angular项目的Service中，通过Subject发射blocks数组，经过同步验证、异步验证后，使用switchMap结合combineLatest处理异步Observable数组。调用removeBlock删除最后一个block时，blocks$ Observable无法接收更新，导致最后一个元素无法移除；但移除asyncValidation逻辑后功能恢复正常。

问题根源 #

combineLatest的核心特性是：只有当传入的所有Observable都至少发射过一次值时，才会向下游发射组合后的结果。当删除最后一个block后，传入combineLatest的是一个空的Observable数组，此时它永远不会触发发射，下游Observable自然无法接收到更新，视图也就不会刷新。

解决方案 #

针对空数组的情况做特殊处理，确保即使没有Observable传入combineLatest，也能向下游发射一个空数组，触发视图更新。

修改后的Service代码

const BLOCKS = [
  {
    name: 'block 1',
    id: 1,
  },
  {
    name: 'block 2',
    id: 2,
  },
];

@Injectable({
  providedIn: 'root',
})
export class Service {
  blocks = BLOCKS;
  blocksSubject = new Subject<any>();
  blocks$ = this.blocksSubject.asObservable().pipe(
    map((blocks) => blocks.map((block) => this.validation(block))),
    map((blocks) => blocks.map((block) => this.asyncValidation(block))),
    switchMap((blocks) => {
      // 当Observable数组为空时，直接返回空数组的Observable
      return blocks.length ? combineLatest(blocks) : of([]);
    })
  );

  addBlocks() {
    this.blocksSubject.next(BLOCKS);
  }

  removeBlock(id: number) {
    this.blocks = this.blocks.filter((block) => block.id !== id);
    this.blocksSubject.next(this.blocks);
  }

  asyncValidation(block) {
    return of({ ...block, asyncValid: true });
  }

  validation(block) {
    return { ...block, valid: true };
  }
}

另一种实现方式（使用defaultIfEmpty）

也可以通过defaultIfEmpty操作符简化逻辑：

blocks$ = this.blocksSubject.asObservable().pipe(
  map((blocks) => blocks.map((block) => this.validation(block))),
  map((blocks) => blocks.map((block) => this.asyncValidation(block))),
  switchMap((blocks) => combineLatest(blocks).pipe(defaultIfEmpty([])))
);

效果说明 #

修改后，当删除最后一个block时，switchMap会返回一个发射空数组的Observable，下游的blocks$能接收到这个空数组，视图会正确更新为没有任何block元素。

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