如何使用 angular 6 和 RxJs 6 从 forkJoin 订阅中获取 return 值？

Question

private save(payload) {

  const newMedias: Observable<Media>[] = [];
  const newMediaInStepIndex: number[] = [];

  (payload.formData.steps).forEach((step: Step, stepIndex: number) => {
    const media: Observable<Media> = this.createOneMedia(step);
    if (media !== undefined) {
      newMedias.push(media);
      newMediaInStepIndex.push(stepIndex);
    }
  });

  forkJoin(newMedias).subscribe(medias => {
    medias.forEach((media, i) => {
      console.log('Media created with id: ' + media.id + ' in step ' + newMediaInStepIndex[i]);
      payload.formData.steps[newMediaInStepIndex[i]].media[0].id  = media.id;
    });
  });

  return this.createRecipe(payload);
}

我的问题是以下行是异步执行的，因此不在结尾的 return 之前：

payload.formData.steps[newMediaInStepIndex[i]].media[0].id  = media.id;

所以我需要在订阅结束后做结束的return。我想我们必须把这个功能减半。

重要提示：return 保存（有效载荷）

Answer 1

需要一个函数来 return 从 forkjoin 合并的 observable，然后从其他地方订阅它

private saveToServer(payload) {

  (payload.formData.steps).forEach((step: Step, stepIndex: number) => {
    const media: Observable<Media> = this.createOneMedia(step);
    if (media !== undefined) {
      newMedias.push(media);
      newMediaInStepIndex.push(stepIndex);
    }
  });

  return forkJoin(newMedias) 
}


private save(payload) { 

  this.saveToServer(payload).subscribe(medias => {
    medias.forEach((media, i) => {
      console.log('Media created with id: ' + media.id + ' in step ' + newMediaInStepIndex[i]);
      payload.formData.steps[newMediaInStepIndex[i]].media[0].id  = media.id;

      //call it here
      this.createRecipe(payload);
    });
  }); 
}

Answer 2

订阅方法有3个参数函数。

1) next()，您已经使用过
2) error()，你还没有
3) complete()，一旦流完成，即运行。

因此您可以像这样在完整的回调中添加您的 createRecipe：

forkJoin(newMedias).subscribe(medias => {
    medias.forEach((media, i) => {
      console.log('Media created with id: ' + media.id + ' in step ' + newMediaInStepIndex[i]);
      payload.formData.steps[newMediaInStepIndex[i]].media[0].id  = media.id;
    });
  },
err => {},
() => {
    this.createRecipe(payload);
});

这将在加载所有有效载荷时调用 createRecipe 方法（一旦解析了 newMedias 数组中的所有可观察对象）。

希望这对您有所帮助。

Answer 3

我的解决方案到此结束了吗：

private save(p): Observable<Action> {

    const payload = JSON.parse(JSON.stringify(p));

    const newMedias: Observable<Media>[] = [];
    const newMediaInStepIndex: number[] = [];

    (payload.formData.steps).forEach((step: Step, stepIndex: number) => {
        const media: Observable<Media> = this.createOneMedia(step);
        if (media !== undefined) {
          newMedias.push(media);
          newMediaInStepIndex.push(stepIndex);
        }
    });

    if (newMedias.length > 0) {
        return forkJoin(newMedias).pipe(mergeMap( (medias) => {
          medias.forEach((media, i) => {
            payload.formData.steps[newMediaInStepIndex[i]].media[0].id = media.id;
          });
          return this.createRecipe(payload);
        }));
    } else {
        return this.createRecipe(payload);
    }

}

我在 pipe 中将 subscribe 更改为 mergeMap。我 return 在 forkJoin 的 return 中 Observable<Action> 和 save(p) 末尾的 return 这个 save(p)。

我添加：const payload = JSON.parse(JSON.stringify(p)); 因为 p 来自 @ngrx.

如何使用 angular 6 和 RxJs 6 从 forkJoin 订阅中获取 return 值？

How to return value from subscribe of forkJoin with angular 6 and RxJs 6?

angular

rxjs6