angular 2 个可观察下一个

Question

我正在尝试了解 observables 的使用，

在简单的情况下一切正常，但在一个情况下我想压缩多张图片。

我正在使用 ng2-img-tools

Method to compress an image. This reduces the quality of an image down until it fits a certain fileSize which is given as maxSizeInMB. Set ignoreAlpha to true if you want to ignore the alpha channel for png images and compress them nonetheless (not recommended - the alpha channel will be lost and the resulting image might differ from the original image). Returns an observable that for every file given, onNext receives either a File when everything went as planned or an error Object if something went wrong.

在我的代码中，我正在执行以下操作：

compressImages(filesToUpload:File[]):Observable<any> {
    if (filesToUpload && filesToUpload.length > 0) {
      return this.ng2ImgToolsService.compress(filesToUpload,GlobalService.MAX_FILE_SIZE_MB).map(response =>  {
        console.log("response is");
        console.log(response)
        return response;
      });
    }
    return Observable.of("no_image").map(response =>  "no_image");

  }


this.imageService.compressImages(filesToUpload).flatMap(result => {
          console.log(result)
          return  this.http.post(...);
        }
      ).catch(UtilsService.handleError);

问题是结果 returns 只有 1 个文件，我知道我应该在某个地方使用 result.next() 但我不知道如何使用。

Answer 1

问题是您需要 subscribe 函数，而不是执行另一个映射。当您订阅一个可观察对象时，您将隐式接收 onNext() 的值作为 result

this.imageService.compressImages(filesToUpload).subscribe(
    result => {
        // this contains the value of onNext()
        console.log(result)
        return     this.imageService.compressImages(filesToUpload).subscribe(
    result => {
        // this contains the value of onNext()
        console.log(result)
        return  this.http.post(...);
    }, error => {
        // error
    } this.http.post(...);
    }, error => {
        // error
    }

more info on subscribing

编辑

如果您想收集流中的所有项目并将它们作为一个列表进行操作，您可以像这样使用 toList()：

this.imageService.compressImages(filesToUpload).toList().subscribe(
    result => {
        // this contains all values from the stream
        console.log(result)
        return  this.http.post(...);
    }, error => {
        // error
    }

angular 2 个可观察下一个

angular 2 observable next

observable

rxjs5

angular