如何從Angular 6和RxJs 6的forkJoin訂閱中返回值？

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

我的問題是，以下行是異步執行的，因此不在返回結尾之前：

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

所以一旦訂閱結束，我需要返回結尾。 我認為我們必須將此功能削減一半。

重要提示：返回保存（有效負載）

Answer 1

subscription方法具有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 2

需要一個函數來返回來自forkjoin的可觀察對象，然后從其他地方進行訂閱

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 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通過mergeMap更改subscribe 。 我在forkJoin的返回中返回了Observable<Action> ，並在save(p)的末尾返回了它。

我添加以下內容： const payload = JSON.parse(JSON.stringify(p)); 因為p來自@ngrx 。