サービスからのJsonファイルを角2で消費する

Question

私はサービスを持っています。コンストラクタで ：

export class Service { 

    _data: any 

    constructor(private http: Http) { 
    this.http 
     .get('../assets/my_json_file.json') 
     .map(x => x.json()) 
     .subscribe((data) => 
     this._data = data 
    ) 
    console.log(this._data) 
    } 

console.log戻りundefinedconsole.logがsubscribeに渡す関数に移動した場合、それはデータを示していません。

私の目標は、ドロップダウンメニューやもの

this見

の値を持つngOnInitのアプリから呼び出す、サービス内の機能getStuff()の数を持っていることですが、間違った

Answer 1

を行ったかを把握助けにはなりませんでしたthis.http.get('../assets/my_json_file.json')は非同期です。つまり、サーバーへの呼び出しが後で実行できるようにスケジュールされ、サーバーからの応答が最終的に到着すると、.subscribe(...)に渡されたコールバックが応答と共に呼び出されます。 「スケジュールされた」とは、以前にスケジュールされたタスクが完了したときに後で実行するために、タスクがイベントキューに追加されることを意味します。

http.get(...)のコールの後にconsole.log(this._data)が実行されます。これは、サーバーへの呼び出しが開始される前です。

http.get(...)によって返されたオブザーバブルがサブスクライブされている場合にのみ、オブザーバブルが遅延しているため、http.get(...)コールもスケジュールされます。

map(...)代わりsubscribe(...)の返品代わりに応答イベントにチェーンそれ自身のコードにあなたのサービスをユーザーに許可するSubscriptionのObservableを使用します。あなたは

export class MyComponent { 
    constructor(service:Service) { 
    // `subscribe` actually initiates the call to the server 
    service.getData().subscribe(result => console.log(result)); 
    } 
} 

も参照してくださいWhat is the correct way to share the result of an Angular 2 Http network call in RxJs 5?

のようなサービスがないだけ後に、インスタンス化されたときに、あなたが既にサーバーへのコールを開始することができます。この方法でそれを使用することができるコンポーネントで

@Injectable() 
export class Service { 

    _data: any 

    constructor(private http: Http) {} 

    getData() { 
    this.http 
     .get('../assets/my_json_file.json') 
     .map(x => x.json()) 
     .map((data) => 
     this._data = data 
    ) 
    console.log(this._data) 
    } 
} 

サービスを使用するコンポーネントはサブスクライブします。