Observable.of 不是函数

Question

我在项目中导入 Observable.of 函数时遇到问题。我的 Intellij 可以看到一切。在我的代码中，我有：

import {Observable} from 'rxjs/Observable';

在我的代码中我是这样使用它的：

return Observable.of(res);

有什么想法吗？

Answer 1

如果有人在使用 Angular >= 6 和 rxjs 版本 6 或更高版本时遇到此问题，请在此处查看答案： Could not use Observable.of in RxJs 6 and Angular 6

简而言之，你需要像这样导入它：

import { of } from 'rxjs';

然后不是调用

Observable.of(res);

随便用

of(res);

Answer 2

对于我（Angular 5 和 RxJS 5）建议自动完成导入：

import { Observable } from '../../../../../node_modules/rxjs/Observable';

虽然应该是（所有静态运算符 from、of 等都可以正常工作：

import { Observable } from 'rxjs/Observable';

Answer 3

我正在使用 Angular 5.2 和 RxJS 5.5.6

这段代码没有工作：

     import { Observable,of } from 'rxjs/Observable';

     getHeroes(): Observable<Hero[]> {
        return of(Hero[]) HEROES;

      }

以下代码有效：

    import { Observable } from 'rxjs/Observable';
    import { Subscriber } from 'rxjs/Subscriber';

     getHeroes(): Observable<Hero[]> 
     {
          return Observable.create((observer: Subscriber<any>) => {
              observer.next(HEROES);
              observer.complete();
          });

      }

调用方法：

this.heroService.getHeroes()
      .subscribe(heroes => this.heroes = heroes);

我认为他们可能会在 RxJS 5.5.2 中移动/更改 of() 功能

Answer 4

在rxjs v6 中，of 运算符应导入为import { of } from 'rxjs';

Answer 5

import 'rxjs/add/observable/of';

显示 rxjs-compat 的要求

require("rxjs-compat/add/observable/of");

我没有安装这个。由

安装

npm install rxjs-compat --save-dev

然后重新运行解决了我的问题。

Answer 6

RxJS 6

当升级到 RxJS 库的第 6 版并且不使用 rxjs-compat 包时，以下代码

import 'rxjs/add/observable/of';   
  // ...
  return Observable.of(res);

必须改成

import { of } from 'rxjs';
  // ...
  return of(res);

Answer 7

从 Angular 5 / Rxjs 5 升级到 Angular 6 / Rxjs 6？

您必须更改导入和实例化。 Check out Damien's blog post

Tl;博士：

import { Observable, fromEvent, of } from 'rxjs';

const yourResult = Observable
    .create(of(yourObservable))
    .startWith(null)
    .map(x => x.someStringProperty.toLowerCase());

//subscribe to keyup event on input element
Observable
    .create(fromEvent(yourInputElement, 'keyup'))
    .debounceTime(5000)
    .distinctUntilChanged()
    .subscribe((event) => {
        yourEventHandler(event);
    });

Answer 8

不知何故，甚至 Webstorm 也变成了这样 import {of} from 'rxjs/observable/of'; 一切都开始工作了

Answer 9

// "rxjs": "^5.5.10"
import { of } from 'rxjs/observable/of';

.... 
return of(res)

Answer 10

这应该可以正常工作，试试吧。

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';

Answer 11

对于 Angular 5+：

import { Observable } from 'rxjs/Observable';应该可以工作。观察者包也应该匹配导入 import { Observer } from 'rxjs/Observer'; 如果你使用的观察者是

import {<something>} from 'rxjs'; 进行大量导入，因此最好避免它。

Answer 12

我的愚蠢错误是我在需要 observable 时忘记添加 /add。

曾经：

import { Observable } from 'rxjs/Observable';
import 'rxjs/observable/of';

这看起来不错，因为rxjs/observable/of 文件实际上存在。

应该是：

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';

Answer 13

无论出于何种原因，修补对我不起作用，所以我不得不求助于这种方法：

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

// ...

return of(res)

Answer 14

我今天遇到了这个问题。我正在使用 systemjs 加载依赖项。

我是这样加载 Rxjs 的：

...
    paths: {
        "rxjs/*": "node_modules/rxjs/bundles/Rx.umd.min.js"
    },
...

而不是使用路径使用这个：

var map = {
...
'rxjs':                       'node_modules/rxjs',
...
}

var packages = {
...
'rxjs': { main: 'bundles/Rx.umd.min.js', defaultExtension: 'js' }
...
}

systemjs 加载库的方式的这个小改变解决了我的问题。

Answer 15

只是补充，

如果您使用其中的许多，那么您可以使用

导入所有

import 'rxjs/Rx'; 

如@Thierry Templier 所述。但我认为如果您使用的是有限运算符，那么您应该导入单个运算符，例如

import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/mergeMap';
import 'rxjs/add/observable/of';

如@uksz 所述。

因为 'rxjs/Rx' 将导入所有 Rx 组件，这绝对是性价比。

Answer 16

虽然听起来很奇怪，但对我来说，在import {Observable} from 'rxjs/Observable 的导入路径中将“O”大写很重要。如果我从 rxjs/observable 导入 Observable，带有 observable_1.Observable.of is not a function 的错误消息仍然存在。奇怪，但我希望它对其他人有所帮助。

Answer 17

您也可以通过这种方式导入所有运算符：

import {Observable} from 'rxjs/Rx';

Answer 18

实际上我的导入搞砸了。在最新版本的 RxJS 中，我们可以这样导入它：

import 'rxjs/add/observable/of';