关于angular：Observable.of不是一个函数


Observable.of is not a function

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

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

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

1
return Observable.of(res);

有任何想法吗？

相关讨论

其实我的进口乱成一团。在最新版本的RxJS中，我们可以这样导入它：

1
import 'rxjs/add/observable/of';
相关讨论

如果有人在使用Angular 6 / rxjs 6时遇到此问题，请在此处查看答案：
无法在RxJs 6和Angular 6中使用Observable.of

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

1
import { of } from 'rxjs';

然后不要打电话

1
Observable.of(res);

只是使用

1
of(res);
相关讨论

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

我的愚蠢错误是，在需要可观察到的内容时，我忘记添加/add。

是：

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

实际上，存在由于rxjs/observable/of文件而在外观上看起来不错的文件。

应该：

1
2
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
相关讨论

如果您使用的是Angular 6/7

1
import { of } from 'rxjs';

然后不要打电话

1
Observable.of(res);

只是使用

1
of(res);
相关讨论

无论出于什么原因，补丁都不对我有用，所以我不得不采用这种方法：

1
2
3
4
5
import { of } from 'rxjs/observable/of'

// ...

return of(res)
相关讨论

只是添加，

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

1
import 'rxjs/Rx';

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

1
2
3
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/mergeMap';
import 'rxjs/add/observable/of';

如@uksz所述。

因为" rxjs / Rx"将导入所有肯定会降低性能的Rx组件。

Comparison

相关讨论

您还可以通过以下方式导入所有运算符：

1
import {Observable} from 'rxjs/Rx';
相关讨论

1
2
3
4
5
//"rxjs":"^5.5.10"
import { of } from 'rxjs/observable/of';

....
return of(res)
相关讨论

尝试一下就可以正常工作。

1
2
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
相关讨论

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

您必须更改导入和实例化。查看Damien的博客文章

Tl; dr：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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);
    });
相关讨论

我正在使用Angular 5.2和RxJS 5.5.6

该代码不起作用：

1
2
3
4
5
6
     import { Observable,of } from 'rxjs/Observable';

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

      }

下面的代码有效：

1
2
3
4
5
6
7
8
9
10
11
    import { Observable } from 'rxjs/Observable';
    import { Subscriber } from 'rxjs/Subscriber';

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

      }

调用方式：

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

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

对于Angular 5+：

import { Observable } from 'rxjs/Observable';应该起作用。如果您使用的观察者包，则观察者包也应与导入import { Observer } from 'rxjs/Observer';匹配

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

RxJS 6

当升级到RxJS库的版本6而不使用rxjs-compat软件包时，以下代码

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

必须改为

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

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

我正在像这样加载Rxjs：

1
2
3
4
5
...
    paths: {
       "rxjs/*":"node_modules/rxjs/bundles/Rx.umd.min.js"
    },
...

代替使用路径使用此：

1
2
3
4
5
6
7
8
9
10
11
var map = {
...
'rxjs':                       'node_modules/rxjs',
...
}

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

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

相关讨论

对于我(Angular 5和RxJS 5)，自动完成导入建议：

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

而to应该是(使用所有静态运算符from，of，e.c.t可以正常工作：

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

1
import 'rxjs/add/observable/of';

显示了rxjs-compat的要求

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

我没有安装此程序。安装者

1
npm install rxjs-compat --save-dev

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

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

某种程度上，甚至Webstorm都像这样import {of} from 'rxjs/observable/of';
一切开始起作用