Question

我对RxJs和NgRx store非常陌生，我想要创建一个@Effect，其中包含两个可观察对象（非常难以解释）：< / p>

我的界面如下：

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超过原始观察值，以便payload.id将其提供给getStepBody可观察对象。
然后，在flatMap内，您希望map observable上的getStepBody返回一个新值，该值是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});

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

1 个答案: