如何在高阶可观察量中返回外部可观察量而不是内部可观察量

Question

Lets clarify the problem with the following code:

    this.rates$ = this._glbRateService.getRates(params); // 1
    this.rates$.pipe(
        mergeMap(rates => {
            const priceByRates: Observable<any>[] = rates.map(rate => {
                const paramsRatingItemProduct = {
                    idItem: product.idItem,
                    idRate: rate.idRate
                };
                return this._glbRatingItemProduct.getPrice(paramsRatingItemProduct); // 2
            });
            return priceByRates;
        })
    ).subscribe(response => {
        console.log(response); // 3
    });

In that code:

1. I get rates from server
2. For every rate, I get prices (map)
3. My console.log returns the value from the inner subscription (this._glbRatingItemProduct.getPr...)

And what I want is to do logic with the mapping values and the inner subscription.

Something like this:

this.rates$ = this._glbRateService.getRates(params);
this.rates$.pipe(
    mergeMap(rates => {
        const priceByRates: Observable<any>[] = rates.map(rate => {
            const paramsRatingItemProduct = {
                idItem: product.idItem,
                idRate: rate.idRate
            };
            return this._glbRatingItemProduct.getPrice(paramsRatingItemProduct);
            // WITH THE SUBSCRIPTION OF THIS RETURN I WANT TO MAKE LOGIC
            // WITH rates.map, and then return rates, NOT THE INNER SUBSCRIPTION

        });
        return priceByRates;
    })
).subscribe(response => {
    console.log(response);
});

Answer 1

You first need to execute the inner observable array first with maybe forkJoin then run your mapping function with the array

mergeMap(rates => {
    const priceByRates: Observable<any>[] = rates.map(rate => {
        const paramsRatingItemProduct = {
            idItem: product.idItem,
            idRate: rate.idRate
        };
        return this._glbRatingItemProduct.getPrice(paramsRatingItemProduct);

    });
    return forkJoin(...priceByRates).pipe((values)=>values.map....your logic ));
})

https://www.learnrxjs.io/learn-rxjs/operators/combination/forkjoin

Answer 2

It's sometimes helpful to separate out the logic of mapping and flattening higher-order observables. Here it should be a bit clearer that map() returns an array of observables and forkJoin() joins all those observables into one stream.

this.rates$ = this._glbRateService.getRates(params);
this.rates$.pipe(
  map(rates => rates.map(
    rate => this._glbRatingItemProduct.getPrice({
      idItem: product.idItem,
      idRate: rate.idRate
    })
  ),
  mergeMap(priceByRates => forkJoin(priceByRates))
).subscribe(console.log);

On the other hand, forkJoin() only emits once all source observables complete. If you don't need all the responses together, you keep your source streams de-coupled with a simpler merge() . Only one line needs to change:

mergeMap(priceByRates => merge(...priceByRates))

---

The thing to remember is that mergeMap expects a single stream to be returned. It will convert an array into a stream of values. So mergeMap(num => [10,9,8,7,num]) doesn't map num into an array, it creates a new stream that will emit those numbers one at a time.

That's why mergeMap(_ => val: Observable[]) will just emit each observable, (as a higher order observable) one at a time.

With this knowledge, you can actually change your stream to merge without using the static merge function above. That could look like this:

this.rates$ = this._glbRateService.getRates(params);
this.rates$.pipe(
  mergeMap(rates => rates.map(
    rate => this._glbRatingItemProduct.getPrice({
      idItem: product.idItem,
      idRate: rate.idRate
    })
  ),
  mergeAll()
).subscribe(console.log);

mergeAll() will take each higher-order observable as it arrives and subscribe+merge their output.