我有 3 种不同的服务 A、B、C。这些服务各自产生不同的 JSON。来自服务 A 的 JSON 具有需要将其值替换为来自 JSON B 和 C 的值的属性。
我已经使用纯 JavaScript 解决了这个问题,但我想使用 Rxjs,因为 Rxjs 是可扩展的。我想返回一个 Observable 而不是数据。
我的三个 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"
}]
}]
}
我的 JavaScript 代码用于替换 JSON A 中的值 ConditionDescr
和 Pay
:
this.httpClient.get<ConditieTypeObject>(environment.url + 'bonus/' + id, {
params: new HttpParams().append('year', year.toString()),
observe: 'body',
responseType: 'json'
}).pipe(map(x => x.conditions)).subscribe((A) => {
A.forEach((y) => {
y.conditionDescr = B.components.filter(function (x2) {
return x2.componentId == y.conditionId;
})[0].description;
y.pay = C.text.filter(function (x3) {
return x3.textcode == 'PERIOD';
})[0].values.filter(function (x4) {
return x4.code == y.pay;
})[0].description;
});
console.log(A);
});
那么结果就是这样,那样就OK了:
{
"conditions": [{
"conditionId": "BASFD",
"conditionDescr": "Assortimentsbonus",
"pay": "Per year"
}, {
// << more items >>
}]
}
但我想在 Rxjs 中解决这个问题,因为我可以使用一个可以直接作为异步传递给 HTML 表的可观察对象。我现在不想像在我的代码中那样首先订阅该函数。
我用 switchMap
和 concatMap
试过了,但这不起作用。有人知道如何在 RxJS 中解决这个问题吗?
最佳答案
在使用combineLatest
之后,您可以pipe()
一个RxJS map()
将您的三个服务请求合并到一个 Observable 中。然后可以将此 Observable 分配给组件类中的变量,并使用模板中的异步管道进行引用。
在您的 component.ts 中:
import { Component, OnInit } from '@angular/core';
import * as fromServices from './services';
import { combineLatest, Observable } from 'rxjs';
import { map } from 'rxjs/operators';
export class ExampleComponent implements OnInit {
// 1. Create a new reference for an Observable that will contain your final data.
finalData$: Observable<any[]>;
constructor(
// 2. Include your various services in your component.
private aService: fromServices.AService,
private bService: fromServices.BService,
private cService: fromServices.CService,
) {}
ngOnInit(): void {
// 3. Initialise the Observables from your services in an Array passed into combineLatest.
this.finalData$ = combineLatest([
this.aService.data$,
this.baService.data$,
this.cService.data$,
])
// 4. Map over each Observable.
.pipe(map(([aData, bData, cData]) => {
// 5. Transform your data. Note: Your Observable must return a value for it to emit a value.
return aData.filter(() => { /* ... */ });
}));
}
}
在您的 component.html 中:
<!-- 6. Use the async pipe to subscribe to this data. -->
<p *ngFor="let data of {{ finalData$ | async }}">{{ data.propertyName }}</p>
关于javascript - 在 Angular 中使用 Rxjs 更新来自不同 Json 源的 Json 中的数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57543085/