异步管道并订阅同一个 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 returns

相同的 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))
    }))

异步管道并订阅同一个 Observable

Async pipe and subscribe on the same Observable

rxjs

angular

async-pipe