如何从 2 个 http 请求以 angular 构建单个对象，而不添加另一个值 [英] how to build single object from 2 http requests in angular, without adding another value
问题描述
如果你看看这个 问题.问题真的很简单，但解决方案更复杂，为了解决更多细节，我问了这个问题.
If you look at this question. the problem was really simple, but solutions were more complicated, to address more details I am asking this question.
如果您查看服务中的 stackblitz代码尝试在将对象传递给组件之前构建对象.我遇到的问题是代码添加的键值，它破坏了表单控件.
If you look at stackblitz in service the code tries to build an object before passing it to a component. The problem I am having is the key value that is added by the code and it is breaking the formcontrols.
第一个响应返回包含只有这些值的路由的对象.
the first response returns object with routes that have only these values.
addressPointId: "adress",
municipalityId: "municipallyty",
regionId: "regionId",
settlementId: "settlementId",
rvId: "rvId", // <--- not included in second call getAddressPoint
sequenceNumber: "sequenceNumber" // <--- not included in second call getAddressPoint
第二个 http 请求采用这些值并返回带有名称值的它，但不包括 rvId 和 sequenceNumber.
the second http request takes these values and returns the it with name values, but excluding rvId and sequenceNumber.
addressPointId: "adress",
municipalityId: "municipallyty",
regionId: "regionId",
settlementId: "settlementId",
regionName: "regionName", // <--- this is added
municipalityName: "municipalityName", // <--- this is added
settlementName: "settlementName", // <--- this is added
description: "description",
我想得到结果对象.
{ <-- coming from first request getRequest
"statusId": 1,
"recDate": "2019-04-18T11:05:25.827Z",
"requestVehicles": [
{
"garageId": 1,
"routes": [
{
"addressPointId": "dasdad", // <-- is in both
"municipalityId": 34, // <-- is in both
"regionId": 4, // <-- is in both
"rvId": "", // <-- coming from first request getRequest
"sequenceNumber": "", // <-- coming from first request getRequest
"settlementId": null, // <-- is in both
"regionName": "dasd", // <-- coming from second request getAddressPoint
"municipalityName": "dasdasd", // <-- coming from second request getAddressPoint
"settlementName": null, // <-- coming from second request getAddressPoint
"description": "Nadaburi" // <-- coming from second request getAddressPoint
}
],
}
],
}
(不幸的是无法修复 stackblitz)现在我在我的实际项目中得到了这个:
{ <-- coming from first request getRequest
"statusId": 1,
"recDate": "2019-04-18T11:05:25.827Z",
"requestVehicles": [
{
"garageId": 1,
"routes": [
{ // =================================
"key": { key object } // <========== this breaks the fromcontrols
//============================================================
"addressPointId": "dasdad", // <-- is in both
"municipalityId": 34, // <-- is in both
"regionId": 4, // <-- is in both
"rvId": "", // <-- coming from first request getRequest
"sequenceNumber": "", // <-- coming from first request getRequest
"settlementId": null, // <-- is in both
"regionName": "dasd", // <-- coming from second request getAddressPoint
"municipalityName": "dasdasd", // <-- coming from second request getAddressPoint
"settlementName": null, // <-- coming from second request getAddressPoint
"description": "Nadaburi" // <-- coming from second request getAddressPoint
}
],
}
],
}
原始代码来自 stackblitz..我根据我的实际情况更改了它.
the original code is coming from stackblitz.. I changed it fitting my actual scenario.
由于某种原因，新的 stackblitz 没有运行，但它在我的实际项目中运行良好，除了响应额外的键值.
for some reason the new stackblitz isn't running, but it works fine for my actual project, other than extra key value in response.
推荐答案
如果我正确理解您的问题，您似乎在询问一个 http 请求，该请求本身依赖于另一个请求，并且这两个请求一起需要以某种方式组合以创建您想要使用的对象.如果我认为正确，那么这里有一些可行的例子.
If I'm understanding your question correctly, it seems that you are asking about an http request that itself is dependent on another request and that the two requests together need to be combined in some way to create an object that you want to make use of. If I have that correct, then here are some workable examples.
首先，您可以在调用本身(即在 component.ts 文件中)构建您需要的对象
first, you could just build the object you need in the call itself (i.e. in the component.ts file)
const id = this.getIdFromRoute(this.route, 'customerId');
let customerWithSource: ICustomer;
this.customerService.getById(id)
.subscribe((customer) => {
this.customerSourceService.getById(customer.SourceId)
.subscribe((source) => {
customerWithSource = customer;
customerWithSource.CustomerSource = source;
});
});
或者您可以在服务中执行此操作，这样在组件中您只需订阅一个已经为您完成所有工作的方法.如果您正在寻找重用，那就太好了.
or you could do this in the service, and that way in the component you are just subscribing to a method that already does all the work for you. Great if you are looking for reuse.
getCustomerWithSource(id: number): Observable<ICustomer> {
return this.getById(id).pipe(
concatMap((customer) => {
return this.customerSourceService
.getById(customer.SourceId)
.pipe(
map((source) => {
customer.CustomerSource = source;
return customer;
}),
);
}),
);
}
第二个的工作方式是你得到第一个答案，然后使用 concatMap 使用第一次调用的值进行第二次调用，最后使用 map 生成最终对象并返回它.
the way this second one is working is that you are getting the first answer back, then using concatMap to make a second call using the values of the first call, then finally using map to make the final object and returning it.
这篇关于如何从 2 个 http 请求以 angular 构建单个对象，而不添加另一个值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
