2016-01-07 13 views
13

私はAngular2を試しています。作成Observable <T>から結果

私は、Webサービスからの植物のリストをダウンロードし、私のサービスでは

(私は選択肢.. asyc /のawaitが到着していることをあまり好きではない)の代わりに約束のHTTPサービス利用Obserableオブジェクトことに気づきました。プラントをクリックすると、ルーティングを使用して詳細が表示されます。 しかし、このようにして私が戻ると、植物は再びダウンロードされます(コンストラクタが再び呼び出されるため)。私のような何かをしたい、この回避するために

public getPlants():Observable<Plants[]> 
{ 
    if (this._plants != null) 
     return Observable.fromResult (this._plants); //This method does not exists 

    return this._http.get('../../res/heroes.json')... 
} 

はそれを行う方法はありますか? tsファイルでObservableクラスをインポートするにはどうすればよいですか?

ありがとう!

+0

あなただけangular2をしようとしている場合は、私はあなたが与えることを提案してもよい[アウレリア](http://aurelia.io/docs.html#/aurelia/framework/1.0.0 -β1.0.7/ doc/article/getting-started)を試してみますか? "httpclient"のctrl-fを押すと例が表示されます。あなたが望むように、それはプロミスを返します。 – MikeSW

+0

それは 'Observable.just'のようなものではないでしょうか? (それは他の言語で呼ばれているものです) – njzk2

答えて

16

これは私の実用的なソリューションです:

if (this._heroes != null && this._heroes !== undefined) { 
    return Observable.create(observer => { 
     observer.next(this._heroes); 
     observer.complete(); 
    }); 
} 

私はこれが最善の解決策であることを願っています。

+0

これは完璧です。これは私に多くの時間を節約しました。ありがとう! – b264

+0

良い人;) –

+0

変数/パラメータ 'オブザーバ 'の種類は何ですか? –

12

TypeScript(またはそれに関するJavaScript)のメソッドはofと呼ばれます。 webpackのようなモジュールバンドラを使用している場合は、演算子もインポートする必要があります。コメントのSergioLを信じてください。

例:

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

public getPlants(): Observable<Plants[]> { 
    // this can be changed to a member variable of course 
    let mocked: Plants[] = [{ 
     id: 1, 
     image: "hello.png" 
    }]; 
    // returns an Observable that emits one value, mocked; which in this case is an array, 
    // and then a complete notification 
    // You can easily just add more arguments to emit a list of values instead 
    return Observable.of(mocked); 
} 
+2

私は、 'import 'rxjs/add/observable/of'; 'を追加する必要があることを知りました。 – SergioL

+2

すべての演算子を1つずつ追加したくない場合は、 'rxjs/Rx''からインポートすることもできます。 – LoganMzz

関連する問題