Javascript 在Angular中使用Rxjs更新来自不同Json源的Json中的数据

我有3个不同的服务A、B、C。这些服务分别生成不同的JSON。服务A中的JSON具有需要用JSON B和C中的值替换的属性

我已经用普通JavaScript解决了这个问题，但我想使用Rxjs，因为Rxjs是可伸缩的。我想返回一个可观察的而不是数据

我的三个JSON：

let A = {
    "conditions": [{
        "conditionId": "BASFD",
        "conditionDescr": "Substitute with component description",
        "pay": "P"
    }, {
        // << more items >>
    }]
};

let B = {
    "components": [{
        "componentId": "BASFD",
        "description": "Assortimentsbonus"
    }, {
        "componentId": "BBY",
        "description": "Bonus bypass"
    }]
};

let C = {
    "text": [{
        "textcode": "PAYMENT",
        "values": [{
            "code": "P",
            "description": "Percentage"
        }, {
            "code": "A",
            "description": "Amount"
        }]
    }, {
        "textcode": "PERIOD",
        "values": [{
            "code": "J",
            "description": "Per year"
        }, {
            "code": "M",
            "description": "Per month"
        }]
    }]
}

那么结果就是这个，那个没关系：

{
    "conditions": [{
        "conditionId": "BASFD",
        "conditionDescr": "Assortimentsbonus",
        "pay": "Per year"
    }, {
        // << more items >>
    }]
}

{
“条件”：[{
“条件ID”：“BASFD”，
“conditionDescr”：“SockmentsBonus”，
“支付”：“每年”
}, {
// >
}]
}

但我想在Rxjs中解决这个问题，因为我可以使用一个可观察的对象，它可以作为异步对象直接传递给HTML表。我不想像现在的代码那样先订阅函数

我用

switchMap

和

concatMap

试过了，但是没有用。有人知道如何在RxJS中解决这个问题吗？

您可以使用将三个服务请求组合成一个可观察的对象后，使用

pipe（）

一个RxJS

map（）

。然后，可以将此可观察对象分配给components类中的变量，并使用模板中的异步管道引用

在您的组件中。ts:

从'@angular/core'导入{Component，OnInit}；
从“./services”导入*作为fromServices；
从“rxjs”导入{CombineTest，Observable}；
从“rxjs/operators”导入{map}；
导出类ExampleComponent实现OnInit{
//1.为包含最终数据的可观察对象创建新的参考。
最终数据$：可观察；
建造师(
//2.在组件中包含各种服务。
专用aService:fromServices.aService，
专用bService:fromServices.bService，
私有cService:fromServices.cService，
) {}
ngOnInit（）：void{
//3.在传入CombineTest的数组中初始化服务中的可观测值。
此.finalData$=CombineTest([
此.aService.data$，
此.baseservice.data$，
此.cService.data$，
])
//4.在每个可观察到的物体上绘制地图。
.pipe（地图（[aData，bData，cData]）=>{
//5.转换数据。注意：您的Observable必须返回一个值，才能发出一个值。
返回aData.filter（（）=>{/*…*/}）；
}));
}
}

在组件中。html:

{{data.propertyName}

嗨，安德鲁，谢谢你的回答。但这并不能解决问题，因为我仍然需要订阅，这打破了可观察的rxjs模式。我想返回一个可观测数据。要访问可观测数据中的数据，您必须订阅该可观测数据。我很好奇为什么你认为订阅的需要打破了可观察的模式？在我的HTML代码中，我想用一个异步来进行subscribe，如果我以你为例，它看起来是这样的：[value]=“finalData | async”finalData在这种情况下是一个可观察的，而不是一个数组。然后我也不需要取消订阅，因为它是由HTML组件完成的。@Ben-我明白了。您可以

pipe

在

combinelatetest

之后使用RxJS

map

来转换所需的数据。这些都可以分配给组件类中的变量，然后使用异步管道引用。见更新的答案。嗨，安德鲁，我更新了你的代码，在转换部分我实现了我的转换代码，但是如果我做了一个订阅测试，那么它给出了一个未定义的。你能看一下吗？