如何在angular 2应用程序中嵌套RxJS映射调用

问题描述： 我想从服务器检索产品阵列。为此，我有一个函数可以执行以下操作：

getProducts(customerId): Observable<Product[]> {
        this.http.get(
            'http://<url>'+'?productId='+productId)
            .map((responseData) => {
                return responseData.json();
            })
            .map((products: Array<any>) => {
                let result:Array<Product> = [];
                if (products) {
                    products.forEach((product) => {
                        result.push(
                            new Product(product.id,
                              product.mediaId,
                              product.description,
                              product.name));
                            });
                }
                return result;
            }

getProducts（customerId）：可观察{
这是http.get(
'http://'+'？productId='+productId）
.map（（响应数据）=>{
返回responseData.json（）；
})
.map（（产品：数组）=>{
让结果：数组=[]；
if（产品）{
products.forEach（（产品）=>{
结果：推(
新产品（Product.id，
product.mediaId，
产品说明：，
产品名称),；
});
}
返回结果；
}

我的问题如下：

---

我希望检索每个需要显示的产品的映像以及产品名称和说明。为了检索映像，我需要调用服务器上的另一个http端点并将product.mediaId作为参数传递。因此，我不清楚的是如何执行此操作。是否需要为每个产品再调用一次http.get通过上一个http.get调用进行了尝试。RxJS的可观察性和功能性是什么？如果有人能对这个问题有所了解，那就太好了。

我会尝试类似的方法：

getProducts(customerId): Observable<Product[]> {
  return this.http.get(
     'https://<url>/products?customerId='+customerId)
             .map(res => res.json())
             .switchMap(
               products => {
                 var productsObs = products.map(
                   (product) => {
                      return this.http.get('https://<url>/products/'+product.id);
                   });
                 return Observable.forkJoin(productsObs);
               })
             .map(
               (productsDetails) => {
                 return productsDetails.map(res=>res.json());
             });
}

getProducts（customerId）：可观察{
返回this.http.get(
'https:///products?customerId=“+客户ID）
.map（res=>res.json（））
.开关图(
产品=>{
var productsObs=products.map(
（产品）=>{
返回此.http.get（'https:///products/“+product.id”）；
});
返回可观察的forkJoin（productsObs）；
})
.地图(
（产品详细信息）=>{
返回productsDetails.map（res=>res.json（））；
});
}

以下是步骤：

• 我为特定客户加载产品
• 我从结果中提取有效载荷
• 我使用

  switchMap

  操作符创建一个新的可观察对象，以获取产品的所有详细信息。为此，我将每个产品映射到一个特定的请求。然后我使用

  forkJoin

  操作符并行加载所有这些请求，并在收到每个响应时继续
• 我收到的

  productDetails

  包含产品的详细信息列表。我从HTTP响应中提取每个产品的详细信息

---

这是相应的plunkr:。

我看到了您的编辑。这很酷（有代码参考）；-）不用担心！非常感谢@Sasxa的尝试！