RxJS如何让指定observable等待另一observable发射非空值

核心思路是将systemAreasOptions$改为声明式Observable，基于RxJS操作符天然建立和mappedItem$的依赖关系，无需在回调中动态赋值，从根源解决asyncPipe不渲染的问题。

改造步骤 #

1. 类级别声明固定引用的流 #

无需在setter中动态修改systemAreasOptions$的引用，直接在类内部完成两个流的声明绑定：

// mappedItem状态流，初始值为空
private mappedItem$ = new BehaviorSubject<IPermissionsMappedItem | null>(null);

// 声明式定义systemAreasOptions$，自动等待mappedItem$非空发射后才执行后续逻辑
public systemAreasOptions$ = this.mappedItem$.pipe(
  // 过滤空值，仅当mappedItem就绪后才触发后续操作
  filter((item): item is IPermissionsMappedItem => !!item),
  // 每次mappedItem更新时重新发起请求，自动取消前一次未完成的请求
  switchMap(() => from(
    this.lookupService.SYSTEM_AREAS.toNestedLookup()
      .$promise as unknown as Observable<IPermissmissionsLookup[]>
  )),
  map(systemAreas => orderBy(systemAreas, systemArea => systemArea?.label?.toLowerCase())),
  map(systemAreas => systemAreas.map(area => ({
    ...area,
    permissions: this.getPermissionsForArea(area.id)
  }))),
  shareReplay(1),
  tap(console.log)
);

2. 简化setter逻辑 #

setter中仅需处理权限初始化后向mappedItem$发射新值即可，无需处理systemAreasOptions$相关逻辑：

public set mappedItem(mappedItem: IPermissionsMappedItem) {
  mappedItem.hydrate$Permissions().then(_ => {
    this.mappedItem$.next(mappedItem);
  });
}

3. 可选：统一订阅BehaviorSubject #

如果需要保留systemAreasOptionsBehaviourSubject$，仅需在组件初始化时订阅一次即可，无需每次setter中重复添加订阅：

ngOnInit() {
  this._subscriptions.add(
    this.systemAreasOptions$.subscribe(this.systemAreasOptionsBehaviourSubject$)
  );
}

方案优势 #

• 流的引用固定，asyncPipe只会订阅一次，不会出现因引用替换导致的HTML不渲染问题
• 完全符合RxJS响应式范式，依赖关系明确，无需手动维护等待逻辑
• 自动处理重复请求问题，switchMap会在mappedItem多次更新时自动取消无效请求
• 避免重复订阅，降低内存泄漏风险

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