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?


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';

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);

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.


42

Jika Anda menggunakan Angular 6/7

import { of } from 'rxjs';

Dan bukannya menelepon

Observable.of(res);

gunakan saja

of(res);

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';

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)

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


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';

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


4

Ini harus bekerja dengan baik, coba saja.

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

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

.... 
return of(res)

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);
    });

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);

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';

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.


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.


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.



0

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

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.