如何在角度2应用程序中嵌套RxJS地图调用

Question

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

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; 
      } 

我的问题是： 我要检索的图像，需要与产品名称和描述一起显示在每一个产品。为了检索图像，我需要调用服务器上的另一个http端点，并将product.mediaId作为参数。所以我不清楚的是我该如何做到这一点。是否需要为先前的http.get调用检索的每个产品再调用一次http.get调用。 RxJS可观察到的功能是什么？如果有人能够对此问题有所了解，那将是非常好的。

Answer 1

我会尝试这样的事情：

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()); 
      }); 
} 

步骤如下：

• 我加载产品特定客户
• 我从结果
• 提取有效载荷我使用switchMap运算符来创建一个新的可观察值来获取产品的所有细节。为此，我会将每个产品映射到特定请求。然后，我使用forkJoin运算符并行加载所有这些请求，并在收到每个响应时继续。
• 我收到的productDetails包含产品详细信息列表。我从HTTP响应中提取每个产品的详细信息。

这里是相应的plunkr：https://plnkr.co/edit/h76inQy0R8EDUgYWADCZ?p=preview。