订阅一个嵌套的 observable答案

【问题标题】：Subscribe to a nested observable订阅一个嵌套的 observable
【发布时间】：2018-09-20 13:34:40
【问题描述】：

假设我在 provider 中有一个函数：

saveCar(car: Car) {
    return this.saveCarImages(car).subscribe(
      (data:any) => {
        if(data[0].seats){
          car=data[0];
      }
      return this.api.put(`/car/${car.id}`, car, {
        headers: {
          'Content-Type': 'application/json'
        }
      });
      }
    )
  }

provider 中的这个辅助函数必须在实际汽车被保存之前执行：

 saveCarImages(car: Car) {
    return Observable.create((observable) => {
      let fileSaver = this.injector.get(FileSaverProvider);
    let promisearr = [];
        promisearr.push(Observable.create((observable) => {
          fileSaver.uploadImage(car.helpImage.file).subscribe(
            (data: any) => {
              car.helpImageId = data.id;
              observable.complete(car);
            }
          )
        })
        )
            promisearr.push(Observable.create((observable) => {
              fileSaver.uploadImage(car.helpImage2.file).subscribe(
                (data: any) => {
                  car.helpImageId2 = data.id;
                  observable.complete(car);
                }
              )
              }));
    return Observable.forkJoin(promisearr);
    });
  }

然后我在组件的 TS 文件中有这段代码：

        this.provider.saveCar(this.car).subscribe(
            (response: any) => {
                if (response) {
                       //success
                }
            },
            (error: any) => {
                      //error
            }
        );

但这不起作用。我在这里试图实现的是从组件的 TS 文件订阅 this.api.put(car) ，但我需要先上传汽车图像，因此 this.api.put(car) 嵌套在可观察到的保存图像。如何从组件的 TS 文件中订阅 this.api.put(car)？

【问题讨论】：

这一定是 RxJS 的第一大问题。您需要的是 mergeMap 运算符。请参考这个解释：reactivex.io/documentation/operators/flatmap.html 和实现：learnrxjs.io/operators/transformation/mergemap.html

标签： angular asynchronous promise rxjs

【解决方案1】：

您不需要使用Observable.create 方法。这是创建 Observables 的一种相当低级的方法，您通常不需要使用它。

具体来说，看看你的代码，你可以看看这个版本的辅助方法是否有效

saveCarImages(car: Car) {
    const fileSaver = this.injector.get(FileSaverProvider);
    const obsArray = [];
    obsArray.push(fileSaver.uploadImage(car.helpImage.file).pipe(map(id => {
       car.helpImageId = id;
       return car;
    })));
    obsArray.push(fileSaver.uploadImage(car.helpImage2.file).pipe(map(id => {
       car.helpImageId2 = id;
       return car
    })));
    return forkJoin(obsArray);
  }

那么saveCar就会变成

saveCar(car: Car) {
   return this.saveCarImages(car).pipe(
     map(data => data[0]),
     switchMap(car => this.api.put(`/car/${car.id}`, car, {
        headers: {
          'Content-Type': 'application/json'
        }
      })
    )
  }

此时您的组件应该能够调用saveCar 并订阅它。

【讨论】：