Как я могу загрузить свой объект в Angular / rxjs, который требует 2 вызовов API

Question

Я использую Angular 6.

У меня есть следующие классы:

export class MyItem{
  id: string;
  name: string;
  gizmo: Gizmo;
};

export class Gizmo{
  id: string;
  name: string;
  color: string;
};

Мне нужно сделать 2 вызова API.
1 - Чтобы получить массив MyItems.
2 - чтобы получить гизмо данного MyItem.

Я пробовал это:

this.myItemService.get<MyItem[]>(
    new FindParameters({ name: name })
  ).pipe(tap(z => {
    z.forEach(function (item) {
      this.gizmoService.get(item.id)
        .subscribe(z => {
          item.gizmo = z;
        });
    });

  }))
  .subscribe(x => this.totalCount = x.length);

Однако gizmoService, по-видимому, находится вне области действия внутри функции.(Если я вытащу его, сервис в порядке)

Так как я могу загрузить свой объект, который потребует 2 отдельных вызова API?

Answer 1

Это должно быть довольно просто, просто имейте в виду, что это не сохраняет тот же порядок предметов.

this.myItemService.get<MyItem[]>(...)
  .pipe(
    mergeAll(), // flatten the array into single emission
    mergeMap(item => this.gizmoService.get(item.id).pipe(
      map(gizmo => {
        item.gizmo = gizmo;
        return item;
      })
    )),
    toArray(), // turn all result into an array again
  )
  .subscribe(...)

Answer 2

Вызов .subscribe() на .subscribe() является анти-паттерном, и его следует избегать любой ценой.Вместо этого вы должны объединить ваши вызовы API в одну наблюдаемую и получить конечный результат с .subscribe().

Из того, что я вижу, вот как вы должны преобразовать свои наблюдаемые, чтобы получить данные гизмо в данные вашего предмета:

this.myItemService.get<MyItem[]>(
    new FindParameters({ name: name })
).pipe(
    mergeMap((myItems: MyItem[]) => {
        const gizmoRequestArray: Observable<MyItem>[] = myItems.map(item => {
            return this.gizmoService.get(item.id).pipe(
                map(z => {
                    item.gizmo = z;
                    return item;
                })
            );
        });
        return combineLatest(gizmoRequestArray);
    })
)
.subscribe(x => this.totalCount = x.length);