如何在 Angular 中将多个 HTTP 调用合并到一个实体模型

Question

我有这种情况：

这个接口代表坐标轴值。

export interface ChartModel {
    HorizontalElement: number,
    VerticalElement: number
}

我可以在一个图中有多个图表，所以我使用这个模型。

import { ChartModel } from "./ChartModel";

export interface ResponseModel {
    PrimaryChart: ChartModel[];
    PreviousQuarterChart1: ChartModel[];
    PreviousQuarterChart2: ChartModel[];
    PreviousQuarterChart3: ChartModel[];
}

现在我有两个返回数据的 API 服务。其中一个我必须打 3 次电话。如何将所有调用合并到一个服务方法中，并且该方法只返回一个 ResponseModel 类型的结果。

对于每个服务调用，我有 3 个这样的元素，这就是我所说的 ChartModel：

[
    {
        "HorizontalElement": 0,
        "VerticalElement": 150
    },
    {
        "HorizontalElement": 1,
        "VerticalElement": 236
    },
    {
        "HorizontalElement": 2,
        "VerticalElement": 330
    }
]

我想要做的是将 3 个响应连接到一个名为 ResponseModel 的对象中。 像这样的：

[
[{"HorizontalElement":0,"VerticalElement":150},{"HorizontalElement":1,"VerticalElement":236},{"HorizontalElement":2,"VerticalElement":330}],
[{"HorizontalElement":0,"VerticalElement":150},{"HorizontalElement":1,"VerticalElement":236},{"HorizontalElement":2,"VerticalElement":330}],
[{"HorizontalElement":0,"VerticalElement":150},{"HorizontalElement":1,"VerticalElement":236},{"HorizontalElement":2,"VerticalElement":330}]
]

Answer 1

我认为您正在寻找 Observable.forkJoin 方法 (https://www.learnrxjs.io/operators/combination/forkjoin.html) 当您有一组可观察对象并且只关心每个对象的最终发出值时，最好使用此运算符。

如果您需要示例，请告诉我。