Observable.of bir işlev değildir


192

Projemdeki Observable.offonksiyonu içe aktarma konusunda sorun yaşıyorum . Intellij'im her şeyi görüyor. Kodumda var:

import {Observable} from 'rxjs/Observable';

ve benim kodda böyle kullanın:

return Observable.of(res);

Herhangi bir fikir?


5
Doğru içe aktarma ve kullanımda import { of } from 'rxjs'; return of(res); rxjs6 kullanıyorsanız en son dokümanlara göz atın github.com/ReactiveX/rxjs/blob/master/MIGRATION.md#import-paths & github.com/ReactiveX/rxjs/blob/master/…
fidev

Yanıtlar:


232

Aslında ithalatı berbat ettim. RxJS'nin son sürümünde şu şekilde içe aktarabiliriz:

import 'rxjs/add/observable/of';

21
192. çift çekimden sonra, kodumda operator/- rxjs/add/operator/of- yerine içe aktardığımı fark ettim observable/. D'oh.
EricRobertBrewer

Bu ifadeyi açısal projelerden birinde kullanmama gerek olmadığını buldum. Ama diğerinde, onu almak zorundayım. Farklılıkları anlamıyorum. Sebeplerini biliyor musun?
niaomingjian

1
Açısal versiyon, belki ?! 4.3.2 için bunu yapmak zorunda değilim ama 5.0.0 için yaptım.
Draghon

@ Draghon: Benimle aynı. 4.4 için yapmak zorunda değildim, şimdi 5.2 için yapıyorum. Daha da garip, sadece bir dosyaya dahil etmeliyim ve diğer tüm .ts dosyaları sadece al ve gitmesi iyi.
JP ten Berge

2
"Rxjs / add / obsable / of" modülünü bulamazsam ne olur?
Enrico

169

Angular 6 / rxjs 6 kullanırken kimse bu sorunu yaşıyorsa, aşağıdaki yanıtlara bakın: RxJs 6 ve Angular 6'da Observable.of kullanılamadı

Kısacası, şu şekilde içe aktarmanız gerekir:

import { of } from 'rxjs';

Ve sonra aramak yerine

Observable.of(res);

sadece kullan

of(res);

2
Teşekkür ederim! Rx'te ithalatı anlamak api dalgalanmasından dolayı benim için her zaman çok büyük bir hayal kırıklığı kaynağıdır.
DomenicDatti

43

Her ne kadar kesinlikle garip gelse de, benimle ithalat yolundaki 'O' harfinden yararlanmak önemliydi import {Observable} from 'rxjs/Observable. observable_1.Observable.of is not a functionBen Gözlemlenebilir gelen alırsanız hata iletisi var kalır rxjs/observable. Garip ama umarım başkalarına yardımcı olur.


42

Açısal 6/7 kullanıyorsanız

import { of } from 'rxjs';

Ve sonra aramak yerine

Observable.of(res);

sadece kullan

of(res);

Bunun nedeni, RxJS sürümünde 5'ten 6'ya birçok değişiklik getiren tanıtım değişikliklerinden kaynaklanmaktadır. Açısal projenizi nasıl taşıyacağınızı
Edric

29

Aptalca hatam, /addgözlemlenebilir olanı gerektirdiğinde eklemeyi unuttum .

was:

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

rxjs/observable/ofAslında görsel olarak Tamam görünüyor çünkü dosya var.

Olmalı:

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

@Shaun_grady'nin işaret ettiği gibi, bir şekilde bu işe yaramıyor. Onun teklifi ile gittim
Sonne

20

Yama ne olursa olsun benim için çalışmadı, bu yüzden bu yönteme başvurmak zorunda kaldım:

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

// ...

return of(res)

Bu geçici bir çözüm değil, bu Angular> = 6.0.0 sözdizimidir. 'rxjs'den içe aktarma {/} benim için iyiydi. Bkz. Stackoverflow.com/questions/38067580/…
mark_h

18

Sadece eklemek için,

bunların çoğunu kullanıyorsanız,

import 'rxjs/Rx'; 

@Trierry Templier tarafından belirtildiği gibi. Ama sanırım sınırlı operatör kullanıyorsanız

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

@uksz tarafından belirtildiği gibi.

Çünkü 'rxjs / Rx', kesinlikle performansa mal olan tüm Rx bileşenlerini içe aktaracaktır.

karşılaştırma


1
Bu ifadeyi açısal projelerden birinde kullanmama gerek olmadığını buldum. Ama diğerinde, onu almak zorundayım. Farklılıkları anlamıyorum. Sebeplerini biliyor musun?
niaomingjian

16

Ayrıca tüm operatörleri şu şekilde içe aktarabilirsiniz:

import {Observable} from 'rxjs/Rx';

7
Bu oldukça büyük bir kütüphane ve "of" çok küçük bir parçası olduğu için, bu şekilde ithal tavsiye etmem.
methgaard

2
@methgaard import { Observable } from 'rxjs/Observable' import 'rxjs/add/observable/of';çalışmıyor. Sadece import {Observable} from 'rxjs/Rx';çalışıyor. Sürüm 5.4.2
niaomingjian

@methgaard üzgünüm. Bir hata yaptım. Gerçek şu ki Observable_1.Observable.of(...).delay(...).timeout is not a function. Ben kullanmadımimport 'rxjs/add/operator/timeout'
niaomingjian

Ayrıca paket boyutunu artırır
Amirhossein Mehrvarzi

5

Açısal 5.2 ve RxJS 5.5.6 kullanıyorum

Bu kod vermedi değil çalışır:

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

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

      }

Aşağıdaki kod çalıştı:

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

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

      }

Arama yöntemi:

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

Bence onlar RxJS 5.5.2 () işlevselliği taşınmış / değiştirilmiş olabilir


4

Bu düzgün çalışmalıdır sadece deneyin.

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

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

.... 
return of(res)

Bu sadece kodlu bir cevaptır. Ne önermeye çalıştığınızı açıklar mısınız?
Peter Wippermann

1
Merhaba, performans sorunu nedeniyle yalnızca "Gözlenebilir" değil, yalnızca ihtiyacımız olan operatörü içe aktarmalıyız. Yeni sürümde (^ 5.5.10) "operatörünün" "içe aktarılmasının doğru yolu:" rxjs / obsable / of "den içe aktarılan {of} ... Benim durumum için çalışır. Kararımı düzenleyeceğim. Teşekkürler Peter.
letanthang

4

Angular 5 / Rxjs 5'ten Angular 6 / Rxjs 6'ya mı yükseltildi?

İçe aktarma işleminizi ve örneklemenizi değiştirmelisiniz. Damien'ın blog gönderisine göz at

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
6.0 kullanıldığında, Observable.create (/ (val)) öğesine abone olmaya çalışmak "this._subscribe bir işlev değildir" ile sonuçlandı. Bunun yerine, sadece "of (val)" diyerek bir gözlemlenebilir başarıyla oluşturdum.
Jim Norman

3

RxJS 6

RxJSKütüphanenin 6. sürümüne yükseltme yaparken ve rxjs-compatpaketi kullanmadığınızda aşağıdaki kod

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

değiştirilmeli

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

3

Benim için (Açısal 5 ve RxJS 5) otomatik tamamlama içe aktarma önerdi:

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

tüm statik operatörleri ile (olması gerekirken from, of, vb çalışma cezası:

import { Observable } from 'rxjs/Observable';

2

Bugün bu problemim vardı. Bağımlılıkları yüklemek için systemjs kullanıyorum.

Ben böyle Rxjs yüklüyordu:

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

Kullanım yolları yerine şunu kullanın:

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

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

Systemjs'in kütüphaneyi yükleme biçimindeki bu küçük değişiklik sorunumu düzeltti.


Soru Açısal 2 için geçerlidir. RxJS UMD modülü ile iyi performans göstermez .
Estus Flask

2

Açısal 5+ için:

import { Observable } from 'rxjs/Observable';çalışmalı. Gözlemci paketi import { Observer } from 'rxjs/Observer';,

import {<something>} from 'rxjs'; büyük bir ithalat yapar, bundan kaçınmak daha iyidir.


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

rxjs-compat gereksinimini gösterir

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

Bunu yüklemedim. Yükleyen

npm install rxjs-compat --save-dev

ve rerunning sorunumu düzeltti.



0

Bir şekilde Webstorm bile böyle yaptı import {of} from 'rxjs/observable/of'; ve her şey çalışmaya başladı

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.