Angular Map 并订阅 Observable pipe

Question

I need your help in RxJS.

I made this code, that's needed to fetch an API, and for returned element, get this element type from another API. This code works fine, but it return an Observable for 'type' property instead of "string" only. Do you know how to achieve this? Thanks a lot.

combineLatest([
  this.service.list().pipe(
   map(items =>
     items.map(item => {
       item['type'] = this.getType(item.id);
       return item;
     })
    ),
    map(items => items.map(item => ({
      id: item.id,
      type: item['type'],
    })))
 ),
 this.form.valueChanges,
]).subscribe()

Answer 1

You're assigning the Observable to the property instead of it's response. You'd need to use RxJS forkJoin and Array#map with a higher order mapping operator like switchMap .

Try the following

combineLatest([
  this.service.list().pipe(
    switchMap((items: any) =>             // <-- switch to another observable
      forkJoin(                           // <-- multiple parallel requests
        items.map(item => 
          this.getType(item['id']).pipe(
            map((type: any) => ({         // <-- map back to original item with added type
              ...item,
              type: type
            }))
          )
        )
      )
    )
  ),
  this.form.valueChanges,
]).subscribe()