Angular 异步 pipe 与 mergeMap

Question

I am experimenting.

In my component I call an API 9 times and each time extract the title with a mergeMap. I then try to display those titles in my template, but it fails saying ngFor doesn't support string, only arrays.

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

Change your title statement to:-

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

Seems like your observables return back as a string for each items, what you could do is use the toArray() operator.

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")),
    toArray()
) as Observable<string[]>;  

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