Question

我正在实验。

在我的组件中，我调用了9次API，每次都使用mergeMap提取标题。然后，我尝试在模板中显示这些标题，但无法说ngFor不支持字符串，仅支持数组。

titles$: Observable<string[]>;

ngOnInit(): void {
  this.titles$ = of(1, 2, 3, 4, 5, 6, 7, 8, 9).pipe(
    mergeMap<number, any>((x) => ajax.getJSON(this.apiUrl + x)),
    mergeMap<Person, any>((person) => of(person?.title ?? "bad"))
  ) as Observable<string[]>;  
}

//This nicely prints out the titles 
this.titles$.subscribe((title) => console.log(title));


<div *ngIf="titles$">
   <div *ngFor="let title of titles$ | async">
     {{ title }}
   </div>
</div>

Answer 1

将标题声明更改为：-

this.titles$ = forkJoin(of(1, 2, 3, 4, 5, 6, 7, 8, 9).pipe(
    mergeMap<number, any>((x) => ajax.getJSON(this.apiUrl + x)).pipe(map<Person, any>((person) => person?.title ?? "bad"))
  ))

Answer 2

好像您的可观察对象以字符串形式返回每个项目，您可以使用request2运算符。

toArray()

StackBlitz：https://stackblitz.com/edit/angular-ivy-vcprxo

具有mergeMap的角度异步管道

2 个答案: