Как заполнить Observableот 2-х вызовов API

Question

Мне нужно вернуть Observable<MyResult[]>.

. Для этого мне нужно сделать 2 отдельных вызова API для загрузки данных.

1. Для загрузки MyItem
2. Чтобы загрузить Gizmos [] для каждого элемента.

Я задал похожий вопрос, но разница была в том, что я загружал второй API в объект первого API.На этот раз мне нужно загрузить оба вызова API в отдельный объект.

SO Вопрос

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

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

export class MyResult{
  item: MyItem;
  gizmos: Array<Gizmo>;
}

Я прочитал React, но он все еще не нажимает на менячто я могу / не могу сделать синтаксически.

РЕДАКТИРОВАТЬ:

Я ищу следующие результаты:

{   
    "MyResult": [ 
        { "MyItem": { "id": "100", "name": "Bob", "Gizmo": [{"id": "1", "itemId": "100", "name": "Gizmo1", "color": "Red"}, { "id": "2", "itemId": "100", "name": "Gizmo2", "color": "Blue" } ] }}, 
        { "MyItem": { "id": "200", "name": "Sally", "Gizmo": [{ "id": "3", "itemId": "200", "name": "Gizmo3", "color": "Black" }, { "id": "4", "itemId": "200", "name": "Gizmo55", "color": "White" }] }}
    ]
}   

Answer 1

Я захватил то, что вы хотите в этом stackblitz

Проверьте консоль браузера, чтобы увидеть результат.

Вот код основного контроллера:

import { Component } from '@angular/core';
import { Observable, of, combineLatest } from 'rxjs'
import { map } from 'rxjs/operators'
import { MyItem, Gizmo, MyResult } from './classes'

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  ngOnInit() {
    this.doApiCalls().subscribe((result: MyResult) => {
      console.log('result', result)
    })
  }

  doApiCalls(): Observable<MyResult> {
    // mimic an Observable response from an API
    const firstCall: Observable<MyItem> = of(new MyItem('100', 'fred'));

    // mimic an Observable response from an API
    const secondCall: Observable<Gizmo[]> = of([
      new Gizmo('1', '100', 'gizmo1', 'red'),
      new Gizmo('2', '100', 'gizmo2', 'blue')
    ]);

    const result: Observable<MyResult> = combineLatest(firstCall, secondCall).pipe(
      map(([item, gizmos]) => new MyResult(item, gizmos))
    )

    return result
  }
}