Observable.of ไม่ใช่ฟังก์ชั่น


192

ฉันมีปัญหากับObservable.ofฟังก์ชั่นการนำเข้าในโครงการของฉัน Intellij ของฉันเห็นทุกสิ่ง ในรหัสของฉันฉันมี:

import {Observable} from 'rxjs/Observable';

และในรหัสของฉันฉันใช้มันเหมือนที่:

return Observable.of(res);

ความคิดใด ๆ


5
ชำระเงินเอกสารล่าสุดหากคุณใช้ rxjs6 ในการนำเข้าและการใช้งานที่ถูกต้องimport { of } from 'rxjs'; return of(res); github.com/ReactiveX/rxjs/blob/master/MIGRATION.md#import-paths & github.com/ReactiveX/rxjs/blob/master/ เป็นต้น
fidev

คำตอบ:


232

ที่จริงฉันนำเข้ามายุ่ง ในเวอร์ชันล่าสุดของ RxJS เราสามารถนำเข้าได้เช่น:

import 'rxjs/add/observable/of';

21
หลังจากที่ 192 สองครั้งใช้เวลาของฉันฉันสังเกตเห็นว่าในรหัสของฉันฉันถูกนำเข้าจากoperator/- rxjs/add/operator/of- observable/แทน D'โอ้
EricRobertBrewer

ฉันพบว่าฉันไม่จำเป็นต้องใช้คำสั่งนี้ในหนึ่งในโครงการเชิงมุม แต่ในอีกทางหนึ่งฉันต้องนำเข้ามัน ฉันไม่เข้าใจความแตกต่าง คุณรู้เหตุผลหรือไม่
niaomingjian

1
บางทีอาจเป็นเวอร์ชั่นเชิงมุม! ฉันไม่ต้องทำสิ่งนี้สำหรับ 4.3.2 แต่ทำเพื่อ 5.0.0
Draghon

@Draghon: เหมือนกันกับฉัน ฉันไม่ต้องทำเพื่อ 4.4 ฉันทำตอนนี้สำหรับ 5.2 ยิ่งแปลกกว่านี้ฉันต้องรวมมันไว้ในไฟล์เดียวและไฟล์. ts อื่น ๆ ทั้งหมดก็หยิบมันขึ้นมาและดีไปเลย
JP ten Berge

2
จะทำอย่างไรถ้าฉันหาโมดูล "rxjs / add / observable / of" ไม่พบ?
Enrico

169

หากใครมีปัญหานี้ขณะใช้งาน Angular 6 / rxjs 6 ดูคำตอบที่นี่: ไม่สามารถใช้ Observable.of ใน RxJs 6 และ Angular 6

กล่าวโดยย่อคุณต้องนำเข้าแบบนี้:

import { of } from 'rxjs';

แล้วแทนที่จะโทร

Observable.of(res);

เพียงแค่ใช้

of(res);

2
ขอบคุณ! การหาการนำเข้าใน Rx นั้นเป็นสาเหตุที่ทำให้ฉันผิดหวังอย่างมากเนื่องจากความผันผวนของ api
DomenicDatti

43

แม้ว่ามันจะฟังดูแปลก ๆ อย่างกับฉันมันสำคัญที่จะใช้ประโยชน์ 'O' import {Observable} from 'rxjs/Observableในเส้นทางนำเข้าของ เกิดข้อผิดพลาดกับการเข้าพักในปัจจุบันถ้าผมนำเข้าสังเกตจากobservable_1.Observable.of is not a function rxjs/observableแปลก แต่ฉันหวังว่ามันจะช่วยคนอื่น


42

ถ้าคุณใช้ Angular 6/7

import { of } from 'rxjs';

แล้วแทนที่จะโทร

Observable.of(res);

เพียงแค่ใช้

of(res);

นี่เป็นเพราะการเปลี่ยนแปลงในรุ่น RxJS จาก 5 เป็น 6 ซึ่งนำเสนอการเปลี่ยนแปลงแบบแบ่งจำนวนมาก คุณสามารถตรวจสอบวิธีโยกย้ายโครงการแองกูลาร์ของคุณได้ที่นี่: rxjs.dev/guide/v6/migration
Edric

29

ความผิดพลาดที่โง่เขลาของฉันคือฉันลืมเพิ่ม/addเมื่อต้องมีสิ่งที่สังเกตได้

คือ:

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

rxjs/observable/ofอันที่จริงแล้วไฟล์OK นั้นมีอยู่จริง

ควรจะเป็น:

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

อย่างที่ @Shaun_grady ชี้ให้เห็น แต่อย่างใดมันก็ใช้งานไม่ได้ ฉันไปกับข้อเสนอของเขา
Sonne

20

การปะแก้ไม่ได้ผลสำหรับฉันไม่ว่าจะด้วยเหตุผลใดก็ตามดังนั้นฉันจึงต้องใช้วิธีนี้:

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

// ...

return of(res)

นี่ไม่ใช่การแก้ไขนี่เป็นรูปแบบของ Angular> = 6.0.0 นำเข้า {จาก} จาก 'rxjs' ไม่เป็นไรสำหรับฉัน ดูstackoverflow.com/questions/38067580/…
mark_h

18

เพียงเพิ่ม

หากคุณใช้หลายคนคุณสามารถนำเข้าทั้งหมดโดยใช้

import 'rxjs/Rx'; 

ตามที่กล่าวถึงโดย @Thierry Templier แต่ฉันคิดว่าถ้าคุณกำลังใช้ตัวดำเนินการที่ จำกัด คุณควรนำเข้าตัวดำเนินการแต่ละอย่างเช่น

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

ตามที่กล่าวถึง @uksz

เพราะ 'rxjs / Rx' จะนำเข้าส่วนประกอบ Rx ทั้งหมดซึ่งแน่นอนว่าคุ้มค่า

การเปรียบเทียบ


1
ฉันพบว่าฉันไม่จำเป็นต้องใช้คำสั่งนี้ในหนึ่งในโครงการเชิงมุม แต่ในอีกทางหนึ่งฉันต้องนำเข้ามัน ฉันไม่เข้าใจความแตกต่าง คุณรู้เหตุผลหรือไม่
niaomingjian

16

คุณสามารถนำเข้าตัวดำเนินการทั้งหมดด้วยวิธีนี้:

import {Observable} from 'rxjs/Rx';

7
ฉันไม่แนะนำให้นำเข้าด้วยวิธีนี้เนื่องจากเป็นห้องสมุดที่ค่อนข้างใหญ่และ "of" เป็นส่วนเล็ก ๆ ของมัน
methgaard

2
@methgaard import { Observable } from 'rxjs/Observable' import 'rxjs/add/observable/of';ไม่ทำงาน ใช้import {Observable} from 'rxjs/Rx';งานได้เท่านั้น รุ่นคือ 5.4.2
niaomingjian

@methgaard ฉันขอโทษ ฉันทำผิดพลาด Observable_1.Observable.of(...).delay(...).timeout is not a functionความจริงก็คือผมได้ ฉันไม่ได้ใช้import 'rxjs/add/operator/timeout'
niaomingjian

นอกจากนี้ยังเพิ่มขนาดของมัด
Amirhossein Mehrvarzi

5

ฉันใช้ Angular 5.2 และ RxJS 5.5.6

รหัสนี้ใช้ไม่ได้ :

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

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

      }

ทำงานรหัสด้านล่าง:

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

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

      }

วิธีการโทร:

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

ฉันคิดว่าพวกเขาอาจย้าย / เปลี่ยนแปลงการทำงาน () ใน RxJS 5.5.2


4

สิ่งนี้จะทำงานได้อย่างถูกต้องเพียงลองดู

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

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

.... 
return of(res)

นี่เป็นคำตอบเฉพาะรหัสเท่านั้น คุณช่วยอธิบายสิ่งที่คุณพยายามจะแนะนำได้ไหม?
Peter Wippermann

1
สวัสดีเราควรนำเข้าโอเปอเรเตอร์ที่เราต้องการไม่ใช่ทั้งหมด "สังเกตได้" เนื่องจากปัญหาด้านประสิทธิภาพ ในเวอร์ชันใหม่ (^ 5.5.10) วิธีที่ถูกต้องในการนำเข้า "ของ" โอเปอเรเตอร์คือ: import {of} จาก 'rxjs / observable / of' ... มันใช้ได้กับกรณีของฉัน ฉันจะแก้ไขความละเอียดของฉัน ขอบคุณปีเตอร์
letanthang

4

อัปเกรดจาก Angular 5 / Rxjs 5 เป็น Angular 6 / Rxjs 6 หรือไม่

คุณต้องเปลี่ยนการนำเข้าและอินสแตนซ์ของคุณ ลองดูโพสต์บล็อกของ 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
ใช้ 6.0 การพยายามสมัครสมาชิก Observable.create (จาก (val)) ส่งผลให้ "this._subscribe ไม่ใช่ฟังก์ชั่น" แต่ฉันสามารถสร้างสิ่งที่สังเกตได้โดยเพียงแค่เรียก "of (val)"
Jim Norman

3

RxJS 6

เมื่ออัพเกรดเป็นไลบรารี่รุ่นที่ 6 RxJSและไม่ได้ใช้rxjs-compatแพ็คเกจดังต่อไปนี้

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

จะต้องมีการเปลี่ยนเป็น

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

3

สำหรับฉัน (Angular 5 & RxJS 5) การนำเข้าการเติมข้อความอัตโนมัติที่แนะนำ:

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

ในขณะที่การควรจะเป็น (กับผู้ประกอบการทั้งหมดคงfrom, of, ect ปรับการทำงาน:

import { Observable } from 'rxjs/Observable';

2

ฉันมีปัญหานี้ในวันนี้ ฉันใช้ systemjs เพื่อโหลดการอ้างอิง

ฉันกำลังโหลด Rxjs เช่นนี้:

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

แทนที่จะใช้เส้นทางใช้สิ่งนี้:

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

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

การเปลี่ยนแปลงเล็กน้อยในวิธีที่ระบบโหลดไลบรารีแก้ไขปัญหาของฉัน


คำถามที่นำไปใช้กับเชิงมุม 2. มันไม่ทำงานได้ดีกับโมดูล RxJS UMD
Estus Flask

2

สำหรับเชิงมุม 5+:

import { Observable } from 'rxjs/Observable';ควรทำงาน. แพ็คเกจผู้สังเกตการณ์ควรตรงกับการนำเข้าเช่นกันimport { Observer } from 'rxjs/Observer';หากคุณใช้ผู้สังเกตการณ์นั่นคือ

import {<something>} from 'rxjs'; นำเข้าจำนวนมากจึงควรหลีกเลี่ยง


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

แสดงความต้องการของ rxjs-compat

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

ฉันไม่ได้ติดตั้งสิ่งนี้ ติดตั้งโดย

npm install rxjs-compat --save-dev

และทำการแก้ไขปัญหาของฉันอีกครั้ง



โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.