Angularのhttpのような静的データからObservableを作成する方法は?


121

私はこの方法を持つサービスを持っています:

export class TestModelService {

    public testModel: TestModel;

    constructor( @Inject(Http) public http: Http) {
    }

    public fetchModel(uuid: string = undefined): Observable<string> {
        if(!uuid) {
            //return Observable of JSON.stringify(new TestModel());
        }
        else {
            return this.http.get("http://localhost:8080/myapp/api/model/" + uuid)
                .map(res => res.text());
        }
    }
}

コンポーネントのコンストラクタで、私は次のようにサブスクライブしています:

export class MyComponent {
   testModel: TestModel;
   testModelService: TestModelService;

   constructor(@Inject(TestModelService) testModelService) {
      this.testModelService = testModelService;

      testService.fetchModel("29f4fddc-155a-4f26-9db6-5a431ecd5d44").subscribe(
          data => { this.testModel = FactModel.fromJson(JSON.parse(data)); },
          err => console.log(err)
      );
   }
}

これは、オブジェクトがサーバーからのものである場合に機能しますがsubscribe()、静的文字列の指定された呼び出しで動作するオブザーバブルを作成しようとしています(これはtestModelService.fetchModel()、uuidを受信しない場合に発生します)。

回答:


151

おそらくofObservableクラスのメソッドを使用してみることができます:

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

public fetchModel(uuid: string = undefined): Observable<string> {
  if(!uuid) {
    return Observable.of(new TestModel()).map(o => JSON.stringify(o));
  }
  else {
    return this.http.get("http://localhost:8080/myapp/api/model/" + uuid)
            .map(res => res.text());
  }
}

2
最高でした!出来た!私はObservable.from()などの多くのことを試していました。現時点では、ObservableのAPIドキュメントは最もクリーンで最も使いやすいものではありません。ありがとう:)
ミハイル・ミチャイリディス

44
バージョン6 import { of } from 'rxjs';を使用している場合はof、の代わりにを使用する必要がありますObservable.of
vip 2018

2
Angular v7.xxの場合.map()、getの結果には何もないため、実行する必要があります.pipe(map((res:any) => res.json()))。ここを参照してください:stackoverflow.com/a/35220045/986160
ミハイル・ミチャイリディス

62

2018年7月およびのリリースRxJS 6以降、値からObservableを取得する新しい方法は、次のようにof演算子をインポートすることです。

import { of } from 'rxjs';

次のように、値からオブザーバブルを作成します。

of(someValue);

あなたObservable.of(someValue)は現在受け入れられている答えのように行う必要があったことに注意してください。RxJS 6の他の変更点については、こちらの良い記事をご覧ください


どうもありがとう、これは機能します
サラ

19

Angular 2.0.0以降、状況は変わっているようです。

import { Observable } from 'rxjs/Observable';
import { Subscriber } from 'rxjs/Subscriber';
// ...
public fetchModel(uuid: string = undefined): Observable<string> {
  if(!uuid) {
    return new Observable<TestModel>((subscriber: Subscriber<TestModel>) => subscriber.next(new TestModel())).map(o => JSON.stringify(o));
  }
  else {
    return this.http.get("http://localhost:8080/myapp/api/model/" + uuid)
            .map(res => res.text());
  }
}

.next()この関数は、あなたの加入者に呼び出されます。


2
Angular 2.1.2に移行しました。古い方法はまだサポートされているようです。なぜこれがより優れたソリューションなのか、それが従来の方法なのか、詳しく説明していただけますか?その後、コード内のすべての場所で変更し、再度受け入れます。ありがとう
Michail Michailidis

7
@MichailMichailidis、振り返ってみるの月で、両者が同等に有効であるように思える、主な違いは、ティエリーのソリューションをインポートする必要があることであることofのように、rxjsの機能をimport 'rxjs/add/observable/of'
ニール・デ・ウェット

12

これは、静的データの単純なオブザーバブルを作成する方法です。

let observable = Observable.create(observer => {
  setTimeout(() => {
    let users = [
      {username:"balwant.padwal",city:"pune"},
      {username:"test",city:"mumbai"}]

    observer.next(users); // This method same as resolve() method from Angular 1
    console.log("am done");
    observer.complete();//to show we are done with our processing
    // observer.error(new Error("error message"));
  }, 2000);

})

to subscribe to it is very easy

observable.subscribe((data)=>{
  console.log(data); // users array display
});

この回答がお役に立てば幸いです。静的データの代わりにHTTP呼び出しを使用できます。


タイプミスをobservable.subscripeからobservable.subscribeに更新できますか
Sudharshan

3

このようにして、データからObservableを作成できます。私の場合、ショッピングカートを維持する必要があります。

service.ts

export class OrderService {
    cartItems: BehaviorSubject<Array<any>> = new BehaviorSubject([]);
    cartItems$ = this.cartItems.asObservable();

    // I need to maintain cart, so add items in cart

    addCartData(data) {
        const currentValue = this.cartItems.value; // get current items in cart
        const updatedValue = [...currentValue, data]; // push new item in cart

        if(updatedValue.length) {
          this.cartItems.next(updatedValue); // notify to all subscribers
        }
      }
}

Component.ts

export class CartViewComponent implements OnInit {
    cartProductList: any = [];
    constructor(
        private order: OrderService
    ) { }

    ngOnInit() {
        this.order.cartItems$.subscribe(items => {
            this.cartProductList = items;
        });
    }
}
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.