Yang bisa diamati. Bukan fungsi

192

Saya mengalami masalah dengan Observable.offungsi impor di proyek saya. Intellij saya melihat semuanya. Dalam kode saya, saya punya:

import {Observable} from 'rxjs/Observable';

dan dalam kode saya, saya menggunakannya seperti itu:

return Observable.of(res);

Ada ide?

uksz
sumber
5
Periksa dokumen terbaru jika Anda menggunakan rxjs6 pada impor dan penggunaan yang benar import { of } from 'rxjs'; return of(res); github.com/ReactiveX/rxjs/blob/master/MIGRATION.md#import-paths & github.com/ReactiveX/rxjs/blob/master/…
fidev

Jawaban:

232

Sebenarnya impor saya kacau. Dalam versi terbaru RxJS kita dapat mengimpornya seperti itu:

import 'rxjs/add/observable/of';
uksz
sumber
21
Setelah pengambilan ke-192 saya, saya perhatikan bahwa dalam kode saya saya mengimpor dari operator/- rxjs/add/operator/of- bukan observable/. Doh.
EricRobertBrewer
Saya menemukan saya tidak perlu menggunakan pernyataan ini di salah satu proyek sudut. Tetapi yang lain, saya harus mengimpornya. Saya tidak mengerti perbedaannya. Apakah Anda tahu alasannya?
niaomingjian
1
Versi sudut, mungkin ?! Saya tidak harus melakukan ini untuk 4.3.2 tetapi saya lakukan untuk 5.0.0.
Draghon
@ Ragagh: Persis sama dengan saya. Saya tidak harus melakukannya untuk 4.4, saya lakukan sekarang untuk 5.2. Yang lebih aneh, saya hanya perlu memasukkannya ke dalam satu file dan semua file .ts-lain cukup mengambilnya dan siap digunakan.
JP ten Berge
2
Bagaimana jika saya tidak dapat menemukan modul "rxjs / add / observable / of"?
Enrico
169

Jika ada yang mengalami masalah ini saat menggunakan Angular 6 / rxjs 6 lihat jawabannya di sini: Tidak dapat menggunakan Observable.of di RxJs 6 dan Angular 6

Singkatnya, Anda perlu mengimpornya seperti ini:

import { of } from 'rxjs';

Dan bukannya menelepon

Observable.of(res);

gunakan saja

of(res);
jgosar
sumber
2
Terima kasih! Mencari tahu impor dalam Rx selalu menjadi sumber frustrasi besar bagi saya karena volatilitas api.
DomenicDatti
43

Meskipun kedengarannya sangat aneh, bagi saya itu penting untuk menggunakan huruf 'O' di jalur impor import {Observable} from 'rxjs/Observable. Pesan kesalahan dengan observable_1.Observable.of is not a functiontetap ada jika saya mengimpor dari Observable from rxjs/observable. Aneh tapi saya harap ini membantu orang lain.

Mark Langer
sumber
42

Jika Anda menggunakan Angular 6/7

import { of } from 'rxjs';

Dan bukannya menelepon

Observable.of(res);

gunakan saja

of(res);
Akitha_MJ
sumber
Ini karena perubahan pada versi RxJS dari 5 menjadi 6 yang memperkenalkan banyak perubahan. Anda dapat memeriksa cara memigrasi proyek Angular Anda di sini: rxjs.dev/guide/v6/migration
Edric
29

Kesalahan konyol saya adalah saya lupa menambahkan /add ketika membutuhkan yang bisa diamati.

Dulu:

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

Yang secara visual terlihat OK karena rxjs/observable/of file, pada kenyataannya, ada.

Seharusnya:

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
Mata
sumber
seperti @Shaun_grady tunjukkan, entah bagaimana ini tidak berhasil. Saya memang pergi dengan lamarannya
Sonne
20

Patching tidak berfungsi untuk saya, untuk alasan apa pun, jadi saya harus menggunakan metode ini:

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

// ...

return of(res)
Shaun Grady
sumber
Ini bukan pekerjaan, ini adalah sintaks untuk Angular> = 6.0.0. mengimpor {dari} dari 'rxjs' tidak masalah bagi saya. Lihat stackoverflow.com/questions/38067580/…
mark_h
18

Hanya untuk menambahkan,

jika Anda menggunakan banyak dari mereka maka Anda dapat mengimpor semua menggunakan

import 'rxjs/Rx'; 

seperti yang disebutkan oleh @Thierry Templier. Tapi saya pikir Jika Anda menggunakan operator terbatas maka Anda harus mengimpor operator individual seperti

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

seperti yang disebutkan oleh @uksz.

Karena 'rxjs / Rx' akan mengimpor semua komponen Rx yang pasti membutuhkan biaya.

Perbandingan

dharmesh kaklotar
sumber
1
Saya menemukan saya tidak perlu menggunakan pernyataan ini di salah satu proyek sudut. Tetapi yang lain, saya harus mengimpornya. Saya tidak mengerti perbedaannya. Apakah Anda tahu alasannya?
niaomingjian
16

Anda juga dapat mengimpor semua operator dengan cara ini:

import {Observable} from 'rxjs/Rx';
Thierry Templier
sumber
7
Saya tidak akan merekomendasikan mengimpor dengan cara ini, karena ini adalah perpustakaan yang cukup besar dan "of" adalah bagian yang sangat kecil.
methgaard
2
@methgaard import { Observable } from 'rxjs/Observable' import 'rxjs/add/observable/of';tidak berfungsi. Hanya import {Observable} from 'rxjs/Rx';bekerja. Versi ini adalah 5.4.2
niaomingjian
@methgaard saya minta maaf. Saya membuat kesalahan. Faktanya adalah saya dapat Observable_1.Observable.of(...).delay(...).timeout is not a function. Saya tidak menggunakanimport 'rxjs/add/operator/timeout'
niaomingjian
Ini juga meningkatkan ukuran bundel
Amirhossein Mehrvarzi
5

Saya menggunakan Angular 5.2 dan RxJS 5.5.6

Kode ini tidak berfungsi:

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

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

      }

Kode di bawah ini berfungsi:

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

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

      }

Metode panggilan:

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

Saya pikir mereka mungkin pindah / mengubah fungsionalitas () di RxJS 5.5.2

bhogyari karunakar
sumber
4

Ini harus bekerja dengan baik, coba saja.

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

.... 
return of(res)
letanthang
sumber
Ini adalah jawaban hanya kode. Bisakah Anda jelaskan apa yang ingin Anda sarankan?
Peter Wippermann
1
Halo, kami hanya harus mengimpor operator yang kami butuhkan, bukan keseluruhan "Dapat Diamati" karena masalah kinerja. Dalam versi baru (^ 5.5.10) cara yang tepat untuk mengimpor operator "of" adalah: import {of} dari 'rxjs / observable / of' ... Ini berfungsi untuk kasus saya. Saya akan mengedit resolusi saya. Terima kasih Peter.
letanthang
4

Ditingkatkan dari Angular 5 / Rxjs 5 ke Angular 6 / Rxjs 6?

Anda harus mengubah impor dan instantiasi Anda. Lihat posting blog Damien

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
sumber
1
Menggunakan 6.0, mencoba berlangganan ke Observable.create (of (val)) menghasilkan "this._subscribe bukan fungsi". Sebaliknya, saya berhasil membuat diamati dengan hanya memanggil "of (val)".
Jim Norman
3

RxJS 6

Ketika memutakhirkan ke versi 6 RxJSperpustakaan dan tidak menggunakan rxjs-compatpaket kode berikut

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

harus diubah menjadi

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

Bagi saya (Angular 5 & RxJS 5), impor autocomplete menyarankan:

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

sementara untuk harus (dengan semua operator statis from, of, dll bekerja dengan baik:

import { Observable } from 'rxjs/Observable';
Tomas
sumber
2

Saya punya masalah ini hari ini. Saya menggunakan systemjs untuk memuat dependensi.

Saya sedang memuat Rxjs seperti ini:

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

Alih-alih menggunakan jalur gunakan ini:

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

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

Ini sedikit perubahan dalam cara systemjs memuat perpustakaan memperbaiki masalah saya.

Eli
sumber
Pertanyaannya berlaku untuk Angular 2. Tidak berfungsi dengan baik dengan modul RxJS UMD .
Estus Flask
2

Untuk Angular 5+:

import { Observable } from 'rxjs/Observable';harus bekerja. Paket pengamat juga harus sesuai dengan imporimport { Observer } from 'rxjs/Observer'; jika Anda menggunakan pengamat

import {<something>} from 'rxjs'; melakukan impor besar sehingga lebih baik untuk menghindarinya.

SS-
sumber
1
import 'rxjs/add/observable/of';

menunjukkan persyaratan dari rxjs-compat

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

Saya tidak menginstal ini. Diinstal oleh

npm install rxjs-compat --save-dev

dan rerunning memperbaiki masalah saya.

Esaith
sumber
1

Dalam rxjsv6, ofoperator harus diimpor sebagaiimport { of } from 'rxjs';

Lasantha Basnayake
sumber
0

Entah bagaimana bahkan Webstorm membuatnya seperti ini import {of} from 'rxjs/observable/of'; dan semuanya mulai berfungsi

Yevheniy Potupa
sumber