Angular 合并两个可观察的流以生成对象的最终数组

我有一个HTTP服务，它返回以下数据：（）

在得到上述响应后，我想进行另一个HTTP调用，以获取与

customerId

对应的详细信息，这将返回以下数据（比如customerId:114860）：

现在，我想合并以上两个流，以便它将提供以下结果数据：

 [  
   {  
      "customerId":"114860",
      "customerName":"John Dyer",
      "dateOfBirth":"1987-07-19",
      "emailId":"john.dyer@outlook.vom",
      "mobileNo":"6502789426",
      "offers":[  
         {  
            "offerId":"Offer1",
            "offerName":"Wok_Express",
            "offerUrl":"wok_express.png",
            "offerDescription":"Get 10%  discount. Pizzeria where chefs in striped t-shirts toss handmade pizzas."
         },
         {  
            "offerId":"Offer3",
            "offerName":"Only",
            "offerUrl":"only.png",
            "offerDescription":"Get 15% off on refrigerators, washing machine and LED TVs. Get 10% off on all other gadgets"
         },
         {  
            "offerId":"Offer5",
            "offerName":"MakeMyTrip",
            "offerUrl":"MakeMyTrip.png",
            "offerDescription":"Up to Rs. 3000 cashback* on hotels on MakeMyTrip. Offer valid on a min rate of INR 5000."
         },
         {  
            "offerId":"Offer7",
            "offerName":"High_5_Gifts",
            "offerUrl":"high_5_gifts.png",
            "offerDescription":"Saving 15%* up to Rs 350 on first booking of High 5 Gifts. Visit the nearest store for details"
         }
      ]
   },
   {  
      "customerId":"114861",
      "customerName":"Jason Cook",
      "dateOfBirth":"1988-09-22",
      "emailId":"Jason.Cook2@cognizant.com",
      "mobileNo":"6002789426",
      "offers": [ //array of object of offers for 114861]
   },
   ...and so on
]

获得上述结果集；我在这里使用了concatMap（也尝试了mergeMap）：

但是上面的代码只运行一次..不是对所有customerId运行。

---

请帮忙。我已经创建了stackblitz。

您可以使每个带有customerId的元素分别通过mergeAll发出。在这种情况下，它会像你期望的那样工作

   this.allData = this.commonService.getAllCustomers().pipe(
      mergeAll(),
      concatMap(response => {
        return this.commonService.fetchCustomerOffers(response['customerId']).pipe(
          map(d => {
            response['offers'] = d;
            return response;
          }),
        );
      }),
      scan((x, next) => x.concat([next]), [])
    )

---

请参见

您可以使每个具有customerId的元素通过mergeAll单独发出。在这种情况下，它会像你期望的那样工作

   this.allData = this.commonService.getAllCustomers().pipe(
      mergeAll(),
      concatMap(response => {
        return this.commonService.fetchCustomerOffers(response['customerId']).pipe(
          map(d => {
            response['offers'] = d;
            return response;
          }),
        );
      }),
      scan((x, next) => x.concat([next]), [])
    )

---

请参见

谢谢，这很有效。。。现在我想使用异步管道在HTML中绑定这个结果数据集，但HTML没有绑定，这会导致错误。请看这个stackblitz我删除了subscribtion，我相信上面的函数将返回observable，因此绑定在*ngFor.中的异步管道中。在这种情况下，我们应该使用scan操作符在数组中累积所有发出的值。我将纠正我的答案，并在我的视频课程中回顾BlitzMergeAll和其他高阶可观测函数，感谢这项工作。。。现在我想使用异步管道在HTML中绑定这个结果数据集，但HTML没有绑定，这会导致错误。请看这个stackblitz我删除了subscribtion，我相信上面的函数将返回observable，因此绑定在*ngFor.中的异步管道中。在这种情况下，我们应该使用scan操作符在数组中累积所有发出的值。我将更正我的答案，并在我的视频课程中回顾BlitzMergeAll和其他高阶可观测函数

this.commonService.getAllCustomers().pipe(
      concatMap(response => {
        return this.commonService.fetchCustomerOffers(response['customerId']).pipe(
          map(d => {
            response['offers'] = d;
            return response;
          }),
        );
      })
    ).subscribe((res) => {
      console.log(res);

    });

   this.allData = this.commonService.getAllCustomers().pipe(
      mergeAll(),
      concatMap(response => {
        return this.commonService.fetchCustomerOffers(response['customerId']).pipe(
          map(d => {
            response['offers'] = d;
            return response;
          }),
        );
      }),
      scan((x, next) => x.concat([next]), [])
    )