角度2 rc4 Httpからデータを取得した後に変数を作成するobservable

Question

im 2新しいangular2で、私はあなたが私に何かシンプルでなければならないと確信してくれることを願っています。しかし、これはhttp呼び出しを処理できるサービスを作る取引です。データがロードされた後、基本的に私はしたい、その部分に

アップデートを扱うangular2ましょう**

サービス

新しいパラメータでAPIサーバーに再び求めることなく、いくつかのフィルタを適用するために必要な

httpHandler(type,model){var token = this.LoginService.JwtDecoded(); var authHeader = new Headers(); authHeader.append('Authorization', 'Bearer ' + token);

return this.http.get('http://127.0.0.1/api/service/'+model, { 
     headers: authHeader 
     }) 
    .map((res: Response) => res.json()); } 

コンポーネント

this.Request.httpHandler('get','receiver/') 
.subscribe(
    data => this.data = data, <-- from here 
    err => this.error = 'there is a mistake!', 
    () => console.log(this.data) <-- this one is outputing just what i want 
); 
console.log(data); <-- i wanna output the same result in here 

だから、どのように私は、変数にAPIの結果をキャプチャすることができますか？

アップデート** 私はサブスクリプションの外に 'this.data'を出力したいと思います。奇妙なことは、サブスクリプションとhtmlでも出力できますが、htmlで出力する前にそのjsonでいくつかのことをする必要があることです。どんなアイデアの人？ありがとう！

あなたの時間のおかげで、非常に感謝します。

Answer 1

// xyz.service.ts 

import {Injectable} from '@angular/core'; 

import {Http, Response} from '@angular/http'; 
import {Observable} from 'rxjs/Observable'; 
import 'rxjs/add/operator/map'; 

@Injectable() 
export class DataService { 
    private url = `receiver/`; 

    constructor(private http: Http) { 
    } 

    getData(): Observable<any> { 
    return this.http.get(this.url) 
     .map((res: Response) => res.json()); 
    } 
} 

今コンポーネントにそのサービスを使用してデータをフェッチするサービスを作成します。

//xyz.component.ts 

import {Component, OnInit} from '@angular/core'; 

import {DataService} from './xyz.service'; 

import {HTTP_PROVIDERS} from '@angular/http'; 

@Component({ 
    selector: 'app-home-content', 
    templateUrl: 'xyz.component.html', 
    styleUrls: ['xyz.component.scss'], 
    providers: [DataService, HTTP_PROVIDERS] 
}) 
export class HomeContentComponent implements OnInit { 
    private data: Object; 

    constructor(private _dataService: DataService) { 
    } 

    ngOnInit() { 
    this._dataService.getData().subscribe(data => { 
     this.data = data; 
    }); 
    } 
} 

今データは最低、完全、かつ検証可能な例を持っているためにthis.data