错误rxjs_Observable __。Observable.forkJoin不是函数?

时间:2017-06-25 06:32:04

标签: angular angular-cli rxjs5 fork-join

我在Rxjs应用程序中使用angualr-cli

在viewer.component.ts

    //Other Imports
    import { Observable } from 'rxjs/Observable';
    //omitting for brevity
   export class ViewerComponent implements OnInit, AfterViewInit, OnDestroy {
    someFunction(someArg){
    //omitting for brevity
    let someArray: any = [];
    //Add some info
    Observable.forkJoin(someArray).subscribe(data => {
              //Do something with data
            });
    }
    //omitting for brevity
    }  

我得到并且错误为

ERROR TypeError: __WEBPACK_IMPORTED_MODULE_2_rxjs_Observable__.Observable.forkJoin is not a function
    at ViewerComponent.webpackJsonp../src/app/component/viewer.component.ts.ViewerComponent.someFunction(http://localhost:4200/main.bundle.js:4022:73)
    at http://localhost:4200/main.bundle.js:3951:31

但如果我完全导入Rxjsimport 'rxjs';),一切正常。没错。 我似乎还明白了什么是必要的。 我也尝试导入rxjs/Observable/forkjoin,但没有任何效果。

关于如何解决这个问题的任何指示。

4 个答案:

答案 0 :(得分:26)

正如here所述,您有两种选择:

  1. 将所有运营商作为单个包导入
  2. 或单独导入每个运营商
  3. 在第一种情况下,您将使用如下导入:

    {{1}}

    在第二个像这样:

    {{1}}

    我相信你正在寻找的是第二种选择。

答案 1 :(得分:1)

通过导入forkJoin而不是导入Observable将forkJoin运算符用作函数。
使用 forkJoin.subscribe()代替 Observable.forkJoin.subscribe()

import { forkJoin } from 'rxjs/observable/forkJoin'

export class ViewerComponent implements OnInit, AfterViewInit, OnDestroy {
    someFunction(someArg){
      let someArray: any = [];
      forkJoin(someArray).subscribe(data => {
      });
    }
}

源代码:https://github.com/ReactiveX/rxjs/blob/master/src/internal/observable/forkJoin.ts

答案 2 :(得分:0)

在一个项目中,我使用下面的forkjoin代码上传图像,它运行完美。

/**
       *  Upload multiple image and then update the feature
       */
      public uploadImages(apiParams: any[], imageItems: any[]): Observable<any> {
        if (imageItems.length === 0) return;

        let promises = [];
        for (let imageItem of imageItems) {
          promises.push(this.uploadImage(apiParams, imageItem));
        }
        return Observable.forkJoin(...promises);
      }

      /**
       * upload single image
       */
      public uploadImage(apiParams: any[], imageItem: any): any {
        let _formData = new FormData();
        _formData.append("UploadedImage", imageItem,  (new Guid()).toString()+'.png');
        const imageApiUrl = StringFormatter.format(imagePoints.create, apiParams);
        return Observable.fromPromise(
          fetch(imageApiUrl, {
            method: "POST",
            body: _formData
          })
          .then(result => result.json())
        );
      }

答案 3 :(得分:0)

对于RxJS v6.5+,现在是:

import { forkJoin } from 'rxjs';

https://www.learnrxjs.io/operators/combination/forkjoin.html