同一Observable同时使用async管道和手动订阅不触发如何解决？

问题原因 #

• 核心原因1：@angular/fire返回的Firestore数据Observable（比如valueChanges、collectionChanges等）默认是不主动触发complete事件的，这类Observable设计为持续监听Firestore的实时数据更新。而firstValueFrom必须等待Observable发出complete信号才会解析对应的Promise，你代码里的Promise永远处于pending状态，自然不会执行then内的逻辑。
• 核心原因2：你尝试的tap写法只构造了新的Observable实例，没有调用subscribe()订阅，RxJS的操作符只有在订阅触发后才会执行，所以这部分代码完全没有运行。
• async管道能正常工作是因为它只监听Observable的next事件，不需要等待complete，只要有新值发出就会触发视图渲染。

解决方案 #

方案1：仅需要获取一次当前数据 #

使用take(1)操作符，让Observable拿到第一个值后主动触发complete，适配firstValueFrom的逻辑：

import { take, shareReplay } from 'rxjs';

ngOnInit(): void {
  // 用shareReplay(1)替代share，多订阅场景下复用已有值，避免重复请求
  this.users$ = this.userSvc.getNonRedirectingList().pipe(shareReplay(1));
  firstValueFrom(this.users$.pipe(take(1))).then(users => {
    for (let i = 0; i < users.length; i++) {
      console.log(i);
    }
  });
}

方案2：需要持续监听数据更新 #

直接订阅Observable，配合销毁信号避免内存泄漏：

import { shareReplay, takeUntil } from 'rxjs';
import { Subject } from 'rxjs';

private destroy$ = new Subject<void>();

ngOnInit(): void {
  this.users$ = this.userSvc.getNonRedirectingList().pipe(shareReplay(1));
  this.users$.pipe(takeUntil(this.destroy$)).subscribe(users => {
    for (let i = 0; i < users.length; i++) {
      console.log(i);
    }
  });
}

ngOnDestroy(): void {
  this.destroy$.next();
  this.destroy$.complete();
}

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