RxJs:如何将两个 observable 组合成一个不同类型的新 observable

Question

我对 RxJs 很陌生和 NgRx store ，我想创建一个 @Effect结合两个 observables(很难解释):

我的界面看起来像:

export interface ProductDetails {
  product: Product;
  productBody: ProductBody;
}

export interface ProductBody{
  id: string;
  body: string;
}

我正在尝试创建一个新对象 productDetails并设置它的属性。
属性是 product其中 payload有 product和 productBody从 productService(id) 得到它(它返回 observable<productBody> )

此效果应返回 observable<productDetails>

   @Effect()
  getProductDetails$ = this.actions$
    .ofType(ProductActions.GET_STEP)
    .map(action => action.payload)
    .flatMap(s => {
      let body;
      this.productService.getStepBody(s.id).subscribe(x => body = x);
      return Observable.of({
        step: s,
        productBody: body
      });
    })
    .map(res => this.productActions.getProductDetailsSuccess(res));

这将返回: Object {productBody: undefined, product: Object}
我明白为什么返回 undefined为 productBody但不知道如何修复它。我尝试使用 zip , switchMap等等，但没有机会!

Answer 1

这是你可以做的。

您要flatMap在原始 observable 上得到 payload.id把它交给 getStepBody可观察的。

然后，在 flatMap 里面，您要map在 getStepBody observable 返回一个新值，该值是 payload 的复合对象以及 getStepBody 的回应.

最后subscribe得到最终结果。

它看起来像这样:

getProductDetails$ = this.actions$
    .ofType(ProductActions.GET_STEP)
    .map(action => action.payload)
    .flatMap(payload => this.productService.getStepBody(payload.id).map(body => ({step: payload, productBody: body})))
    .subscribe(res => this.productActions.getProductDetailsSuccess(res));  //res is an object of {step: payload, productBody: body}

如果您不想将整个对象返回到 subscribe 中的单个函数中函数，您可以解构这些值，使它们更容易单独使用。要更改 subscribe线到:

.subscribe(({step, body}) => {//do something with each value});