Angular 2 无法从 Rest Service 获取数据

Question

我是 Angular 2 的新手，我正在使用环境来创建一些应用程序。像 Angular.io 这样的网站说我能够创建一个可注入服务并在我的 AppComponent 上使用它，但前提是我从同一个 .ts 文件中读取数据，比如 this.sourceData = {…}。如果我从 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
    }

仅供参考，因为您的 extractData 方法被简化为一行，所以大多数示例（和现实生活中的）代码只会在您的地图函数中内联该调用

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