1

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

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

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

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

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

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()andunsubscribe()而不是firstValueFrom()，但结果是一样的：异步管道工作，我的代码做了不是。

在 S Overflow 回答后编辑：

这个也试过了，结果一样

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

有什么线索吗？

4

2 回答 2

1

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

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

于 2021-09-07T15:10:05.393 回答
0

检查这个

this.todosList = this.appService.getTodos().pipe(tap((x:any) => {
      x.map(i => console.log(i.id))
    }))
于 2021-09-07T15:29:53.660 回答