异步管道和订阅同一个 Observable

Question

我在模板中使用异步管道来获取符合特定条件的用户列表 (getNonRedirectingList)。用户存储在 Firestore 实例中。

在我的组件模板中，我有以下（简化的）代码：

    <div *ngIf="users$ | async as users" class="uwrapper">
        <div *ngFor="let u of users">{{u.name}}</div>
    </div>

这就像一个魅力：它产生 3 个 <div> 块，与我期望的 3 个用户匹配。

但是在 Typescript 代码中，我还需要订阅 @angular/fire 返回的相同 Observable

ngOnInit(): void {
  this.users$ = this.userSvc.getNonRedirectingList().pipe(share());
  firstValueFrom(this.users$).then(users => {
    for (let i = 0; i < users.length; i++) {
      console.log(i);
    }
  });
}

我希望

0
1
2

作为控制台中的输出，但我什么也没得到。即使在console.log(i) 行设置断点，它也永远不会被命中。

我已经尝试过使用和不使用.pipe(share())，我也尝试过两次调用getNonRedirectingList，希望得到两个不同的Observable，我也尝试过使用subscribe() 和unsubscribe() firstValueFrom()，但结果是一样的：异步管道工作，我的代码没有。

在 S Overflow 回答后编辑：

也试过了，结果一样

this.users$.pipe(tap(users => {
  for (let i = 0; i < users.length; i++) {
    console.log(i);
  }
}));

有什么线索吗？

Answer 1

使用async 管道，您已经订阅了 Observable，因此不需要其他任何内容，只需附加运算符，如 tap 即可记录值：

this.users$ = this.userSvc.getNonRedirectingList().pipe(tap(console.log));

Answer 2

CheckThis

this.todosList = this.appService.getTodos().pipe(tap((x:any) => {
      x.map(i => console.log(i.id))
    }))