HTTP API呼び出しの応答が未定義です - 角2

Question

私は以下のようにWebAPIでapiを作成しました。ランニングで

export class AppComponent implements OnInit { 

    data2: String; 
    constructor(private s: DemoService){} 

    ngOnInit(){ 

    this.s.GetHttpData().subscribe(data=>this.data2=data); 
    console.log("Http call completed: "+this.data2); 

} 

：私は

Service.ts

@Injectable() 
export class DemoService { 

    constructor(private http:Http){} 

    GetHttpData(){ 

     return this.http.get('http://localhost:54037/api/home') 
     .map((res:Response)=>res.json()); 
    } 

コンポーネント以下のように角度からそれを呼び出すようにしようとしています

public HttpResponseMessage Get() { 

      var response = Request.CreateResponse(HttpStatusCode.OK); 
      response.Content = new StringContent(JsonConvert.SerializeObject("Hello World"), Encoding.UTF8, "application/json"); 
      return response; 
     } 

アプリケーションは、私は出力を得る：完成

HTTP呼び出し：未定義

は、誰かがこれを助けることはできますか？

ありがとうございました

Answer 1

は、データ関数内console.logを置きます。

このようにお試しいただけますか？

export class AppComponent implements OnInit { 

    data2: String; 
    constructor(private s: DemoService){} 

    ngOnInit(){ 

    this.s.GetHttpData().subscribe(data=>{ 
     this.data2=data; 
     console.log("Http call completed: "+this.data2) 
    }); 

} 

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

Answer 2

ここで簡単にお約束してください。 Service.tsで

（DemoService）

GetHttpData() { 

     return new Promise(resolve => { 

      this.http.get('http://localhost:54037/api/home') 
       .map(res => res.json()) 
       .subscribe(data => { 
      resolve(data); 
     }); 
    } 

、コンポーネントで：

this.s.GetHttpData() 
     .then(data => { 
      console.log("Http call completed: "+data); 
});