Observable.of ist keine Funktion

189

Ich habe Probleme mit der Importfunktion Observable.ofin meinem Projekt. Mein Intellij sieht alles. In meinem Code habe ich:

import {Observable} from 'rxjs/Observable';

und in meinem Code benutze ich es so:

return Observable.of(res);

Irgendwelche Ideen?

uksz
quelle
5
Kasse die neuesten Dokumente , wenn Sie rxjs6 auf dem richtigen Import und Verwendung verwenden import { of } from 'rxjs'; return of(res); github.com/ReactiveX/rxjs/blob/master/MIGRATION.md#import-paths & github.com/ReactiveX/rxjs/blob/master/...
Fidev

Antworten:

232

Eigentlich habe ich Importe durcheinander gebracht. In der neuesten Version von RxJS können wir es so importieren:

import 'rxjs/add/observable/of';
uksz
quelle
21
Nach meinem 192. Double-Take bemerkte ich, dass ich in meinem Code statt von operator/- rxjs/add/operator/of- importierte observable/. D'oh.
EricRobertBrewer
Ich habe festgestellt, dass ich diese Aussage in einem Winkelprojekt nicht verwenden muss. Aber in der anderen muss ich es importieren. Ich verstehe die Unterschiede nicht. Kennst du die Gründe?
Niaomingjian
1
Winkelversion vielleicht?! Ich musste dies nicht für 4.3.2 tun, aber ich tat es für 5.0.0.
Draghon
@Draghon: Genau das gleiche mit mir. Ich musste es nicht für 4.4 machen, ich mache es jetzt für 5.2. Noch seltsamer ist, dass ich es nur in eine Datei aufnehmen muss und alle anderen .ts-Dateien es einfach aufheben und loslegen können.
JP Ten Berge
2
Was ist, wenn ich das Modul "rxjs / add / beobachtbar / von" nicht finden kann?
Enrico
167

Wenn jemand dieses Problem bei der Verwendung von Angular 6 / rxjs 6 hat, lesen Sie die Antworten hier: Observable.of konnte in RxJs 6 und Angular 6 nicht verwendet werden

Kurz gesagt, Sie müssen es wie folgt importieren:

import { of } from 'rxjs';

Und dann anstatt anzurufen

Observable.of(res);

benutz einfach

of(res);
jgosar
quelle
2
Danke dir! Das Herausfinden von Importen in Rx ist für mich aufgrund der API-Volatilität immer eine große Quelle der Frustration.
DomenicDatti
42

Obwohl es absolut seltsam klingt, war es für mich wichtig, das 'O' im Importpfad von groß zu schreiben import {Observable} from 'rxjs/Observable. Die Fehlermeldung mit observable_1.Observable.of is not a functionbleibt vorhanden, wenn ich das Observable aus importiere rxjs/observable. Seltsam, aber ich hoffe, es hilft anderen.

Mark Langer
quelle
39

Wenn Sie Angular 6/7 verwenden

import { of } from 'rxjs';

Und dann anstatt anzurufen

Observable.of(res);

benutz einfach

of(res);
Akitha_MJ
quelle
Dies ist auf Änderungen an der RxJS-Version von 5 auf 6 zurückzuführen, die viele wichtige Änderungen mit sich brachten. Sie können hier nachlesen
Edric
29

Mein dummer Fehler war, dass ich vergessen habe hinzuzufügen /add wenn das Observable benötigte.

War:

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

Was optisch gut aussieht, weil rxjs/observable/of Datei tatsächlich existiert.

Sollte sein:

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
Auge
quelle
Wie @Shaun_grady betonte, funktioniert das irgendwie nicht. Ich ging mit seinem Vorschlag
Sonne
20

Das Patchen funktionierte aus irgendeinem Grund nicht für mich, daher musste ich auf diese Methode zurückgreifen:

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

// ...

return of(res)
Shaun Grady
quelle
Dies ist keine Problemumgehung, dies ist die Syntax für Angular> = 6.0.0. Der Import von 'rxjs' war für mich in Ordnung. Siehe stackoverflow.com/questions/38067580/…
mark_h
18

Nur um hinzuzufügen,

Wenn Sie viele davon verwenden, können Sie alle mit importieren

import 'rxjs/Rx'; 

wie von @Thierry Templier erwähnt. Aber ich denke, wenn Sie einen begrenzten Operator verwenden, sollten Sie einzelne Operatoren wie importieren

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

wie von @uksz erwähnt.

Weil 'rxjs / Rx' alle Rx-Komponenten importiert, die definitiv Leistung kosten.

Vergleich

Dharmesh Kaklotar
quelle
1
Ich habe festgestellt, dass ich diese Aussage in einem Winkelprojekt nicht verwenden muss. Aber in der anderen muss ich es importieren. Ich verstehe die Unterschiede nicht. Kennst du die Gründe?
Niaomingjian
16

Sie können auch alle Operatoren folgendermaßen importieren:

import {Observable} from 'rxjs/Rx';
Thierry Templier
quelle
7
Ich würde den Import auf diese Weise nicht empfehlen, da dies eine ziemlich große Bibliothek ist und "of" ein sehr kleiner Teil davon ist.
Methgaard
2
@methgaard import { Observable } from 'rxjs/Observable' import 'rxjs/add/observable/of';funktioniert nicht. Funktioniert nur import {Observable} from 'rxjs/Rx';. Die Version ist 5.4.2
Niaomingjian
@ Methgaard Es tut mir leid. Ich machte einen Fehler. Tatsache ist, ich habe Observable_1.Observable.of(...).delay(...).timeout is not a function. Ich habe nicht benutztimport 'rxjs/add/operator/timeout'
Niaomingjian
Es erhöht auch die
Bündelgröße
5

Ich verwende Angular 5.2 und RxJS 5.5.6

Dieser Code hat nicht funktioniert:

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

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

      }

Der folgende Code hat funktioniert:

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

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

      }

Aufrufmethode:

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

Ich denke, sie könnten die () Funktionalität in RxJS 5.5.2 verschoben / geändert haben

Karunakar Bhogyari
quelle
4

Dies sollte richtig funktionieren, versuchen Sie es einfach.

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
alok singh
quelle
4
// "rxjs": "^5.5.10"
import { of } from 'rxjs/observable/of';

.... 
return of(res)
Letanthang
quelle
Dies ist eine reine Code-Antwort. Würden Sie bitte erklären, was Sie vorschlagen möchten?
Peter Wippermann
1
Hallo zusammen, wir sollten nur den Operator importieren, den wir benötigen, nicht das gesamte "Observable" wegen Leistungsproblemen. In der neuen Version (^ 5.5.10) ist der richtige Weg, den Operator "of" zu importieren: import {of} from 'rxjs / beobachtbar / of' ... Es funktioniert für meinen Fall. Ich werde meine Auflösung bearbeiten. Danke Peter.
Letanthang
4

Upgrade von Angular 5 / Rxjs 5 auf Angular 6 / Rxjs 6?

Sie müssen Ihre Importe und Ihre Instanziierung ändern. Schauen Sie sich Damiens Blog-Beitrag an

Tl; dr:

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);
    });
KVarmark
quelle
1
Unter Verwendung von 6.0 führte der Versuch, Observable.create (of (val)) zu abonnieren, zu "this._subscribe ist keine Funktion". Stattdessen habe ich erfolgreich ein Observable erstellt, indem ich einfach "of (val)" aufgerufen habe.
Jim Norman
3

RxJS 6

Wenn Sie auf Version 6 der RxJSBibliothek aktualisieren und das rxjs-compatPaket nicht verwenden , geben Sie den folgenden Code ein

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

muss geändert werden in

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

Ich hatte heute dieses Problem. Ich verwende systemjs, um die Abhängigkeiten zu laden.

Ich habe die Rxjs wie folgt geladen:

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

Verwenden Sie anstelle von Pfaden Folgendes:

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

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

Diese kleine Änderung in der Art und Weise, wie systemjs die Bibliothek lädt, hat mein Problem behoben.

Eli
quelle
Die Frage gilt für Angular 2. Mit dem RxJS UMD-Modul funktioniert es nicht gut .
Estus Flask
2

Für Angular 5+:

import { Observable } from 'rxjs/Observable';sollte arbeiten. Das Beobachterpaket sollte auch mit dem Import übereinstimmen, import { Observer } from 'rxjs/Observer';wenn Sie Beobachter verwenden

import {<something>} from 'rxjs'; macht einen großen Import, also ist es besser, es zu vermeiden.

SS-
quelle
2

Für mich (Angular 5 & RxJS 5) schlug der Autocomplete-Import vor:

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

während auf (mit allen statischen Operatoren sein sollte from, ofect adaequat:

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

zeigt eine Anforderung von rxjs-kompatibel

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

Ich hatte dies nicht installiert. Installiert von

npm install rxjs-compat --save-dev

und erneutes Ausführen hat mein Problem behoben.

Esaith
quelle
1

In rxjsVersion 6 sollte der ofOperator als importiert werdenimport { of } from 'rxjs';

Lasantha Basnayake
quelle
0

Irgendwie hat es sogar Webstorm so gemacht import {of} from 'rxjs/observable/of'; und alles fing an zu funktionieren

Yevheniy Potupa
quelle