角2レットサービスからデータを取得できない

Question

私は角度2で新しいです、私はいくつかのアプリケーションを作成するために環境と遊んでいます。サイトのようなことをするAngular.ioは、私が注射可能なサービスを作成し、それを私のAppComponentで使うことができると言っていますが、this.sourceData = {...}のような同じ.tsファイルからデータを読み出すだけです。私は、RESTサービスからJSONデータを取得する場合、データは未定義です

app.service.ts

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

@Injectable() 
export class WebService { 
    private dataUrl = 'http://localhost:8080/api/home'; 
    constructor(private http: Http) { } 
    getData() : Observable<any> { 
     return this.http.get(this.dataUrl) 
      .map(this.extractData) 
      .catch(this.handleError); 
    } 
    private extractData(res: Response) { 
     let body = res.json(); 
     return body.data || {}; 
    } 

app.component.ts

import { Component, OnInit } from '@angular/core'; 
import { WebService } from './app.service'; 

@Component({ 
    selector: 'my-app', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'], 
    providers: [WebService] 

}) 
export class AppComponent implements OnInit { 
    errorMessage: string; 
    theData: Object; 
    constructor(private dataService: WebService) {} 

    ngOnInit() { this.getDataFromService(); } 
    getDataFromService() { 
     this. dataService. getData() 
      .subscribe(
      myData => this.theData = myData, 
      error => this.errorMessage = <any>error); 
    }  
} 

app.component.html

<p> {{ theData. classroom.Id }}</p> 

サービスからのJSON

{ 
    "classroom": { 
     "Id": "01", 
     "totalStudents": "2", 

     "Students": [{ 
      "Name": "Jhon", 
      "age": "18" 
     }, { 
      "Name": "Doe", 
      "age": "18" 
     }], 
     "Teachers": [{ 
      "Name": "Jane", 
      "age": "38" 
     }, { 
      "Name": "Doe", 
      "age": "35" 
     }] 
    } 
} 

Observablesを使用しているときに何か不足していますか？ ありがとうございます

Answer 1

response.json（）を呼び出すと、自動的にajaxレスポンスからデータプロパティを取得して返します。したがって、extractDataメソッドの.dataへの参照を削除します。

getData() : Observable<any> { 
     return this.http.get(this.dataUrl) 
      .map(this.extractData) 
      .catch(this.handleError); 
    } 
    private extractData(res: Response) { 
     return res.json(); 
     //return body.data || {}; // <-- this line needs to go 
    } 

FYI、あなたのextractData方法は、1行、ほとんどの例（と現実の生活）にまで低減されているため、コード意志ちょうどあなたのマップ機能

getData() : Observable<any> { 
     return this.http.get(this.dataUrl) 
      .map(response => response.json()) 
      .catch(this.handleError); 
    }