ヒーローの角2ツアーは動作しません

Question

ヒーローのツアーに基づいてアプリケーションを作成しようとしました。 私はリソースを共有するSpringアプリケーションと、このデータを取得するクライアントアプリケーションを持っています。私はリソースがクライアントアプリケーションに到達することを知っていますが、印刷することはできません。私はにconsole.log（body.data）Iは未定義取得し、私はにconsole.log（本体）を印刷したとき、私は、オブジェクトのリストを取得することにより印刷方法抽出データで

import { HeroesService } from './shared/HeroesService'; 
import { Observable } from 'rxjs/Observable'; 
import { Hero } from './shared/Hero'; 
import { OnInit } from '@angular/core'; 
import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app', 
    template: require('app/app.component.html!text') 
}) 

export class AppComponent implements OnInit { 
    errorMessage: string; 
    items: Hero[]; 
    mode: string = 'Observable'; 
    firstItem: Hero; 

constructor(private heroesService: HeroesService) { } 

ngOnInit(): void { 
    this.getHeroes(); 
    console.log(this.items); 
    //this.firstItem = this.items[0]; 
    } 

getHeroes() { 
    this.heroesService.getHeroes() 
       .subscribe(
        heroes => this.items = heroes, 
        error => this.errorMessage = <any>error 
       ); 
    } 
} 


import { Injectable } from '@angular/core'; 
import { Http, Response } from '@angular/http'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/operator/catch'; 
import 'rxjs/add/operator/map'; 
import { Hero } from './Hero'; 

@Injectable() 
export class HeroesService { 

    private heroesUrl = 'http://localhost:8091/heroes'; 

constructor(private http: Http) { } 

getHeroes(): Observable<Hero[]> { 
    return this.http.get(this.heroesUrl) 
        .map(this.extractData) 
        .catch(this.handleError); 
} 

private extractData(res: Response) { 
    let body = res.json(); 
    console.log(body); 
    return body || { }; 
} 

private handleError(error: Response | any) { 
    let errMsg: string; 
    if (error instanceof Response) { 
     const body = error.json() || ''; 
     const err = body.error || JSON.stringify(body); 
     errMsg = `${error.status} - ${error.statusText || ''} ${err}`; 
    } else { 
     errMsg = error.message ? error.message : error.toString(); 
    } 
    console.error(errMsg); 
    return Observable.throw(errMsg); 
} 
} 

は、したがって、私は身体の代わり体を返します。データ。

オブジェクトをextractDataで印刷すると、オブジェクトのリストが表示されますが、console.log（this.items）を印刷するとAppComponentには定義されません。

何が起こっているのですか？

Answer 1

this.getHeroes()はObservableを返します。これは、購読しない限りデータを取得できないことを意味します。雑誌購読のように考えると、this.getHeroes（）を呼び出すと、あなたは雑誌に登録しましたが、配信されるまで実際には雑誌を受け取ることはありません。

バックAppComponentでてくるデータのはconsole.logを得るためには、次のように.subscribeブロックを置き換える：

.subscribe(
    (heroes) =>{ 
    console.log(heroes); 
    this.items = heroes; 
    }, 
    error => this.errorMessage = <any>error 
); 

は、ブロックをサブスクライブの内側に、あなたが持っている、雑誌のアナロジーを促進するには雑誌を受け取りました。ここにコンソールの内容を記録しています。

希望は、これは[私がangular2において観察/ HTTP /非同期呼び出しからの応答を返すにはどうしますか？]の