如何从 2 个 API 调用中填充可观察<对象[]>

Question

我需要返回一个Observable<MyResult[]>.

为此，我需要进行 2 次单独的 API 调用来加载数据。

1. 加载"我的项目">
2. 为每个项目加载辅助图标 []。

我问了一个类似的问题，但不同的是，我将第二个 API 加载到第一个 API 的对象中。 这次我需要将两个 API 调用加载到一个单独的对象中。

所以问题

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

我已经在这个堆栈闪电战中捕捉到了你想要的东西

检查浏览器控制台以查看结果。

下面是主控制器代码：

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
}
}