Angular 2无法从Rest服务获取数据

我是Angular 2的新手，我正在使用环境创建一些应用程序。执行类似于site Angular.io的操作表示我能够创建一个可注入服务并在我的AppComponent上使用它，但前提是我从相同的.ts文件中读取数据，如下面所示。sourceData={…}。如果我从Rest服务获取json数据，那么数据是未定义的

app.service.ts

从“@angular/core”导入{Injectable}； 从'@angular/Http'导入{Http，Response}； 从'@angular/http'导入{Headers，RequestOptions}； 从“rxjs/Observable”导入{Observable}； 导入“rxjs/add/operator/catch”； 导入'rxjs/add/operator/map'； @注射的 导出类Web服务{ 私有数据URL=http://localhost:8080/api/home'; 构造函数私有http:http{} getData:可观察{ 返回this.http.getthis.dataUrl .mapthis.extractData .catch this.handleError； } 私有数据库：响应{ 让body=res.json； 返回body.data |{}； } app.component.ts

从“@angular/core”导入{Component，OnInit}； 从“./app.service”导入{WebService}； @组成部分{ 选择器：“我的应用程序”， templateUrl:“./app.component.html”， 样式URL:['./app.component.css']， 提供者：[网络服务] } 导出类AppComponent实现OnInit{ 错误消息：字符串； 数据：对象； 构造函数私有数据服务：WebService{} ngOnInit{this.getDataFromService；} getDataFromService{ 这是.dataService.getData 订阅 myData=>this.theData=myData， error=>this.errorMessage=错误； } } app.component.html

{{theData.school.Id}

来自服务的JSON

{ 教室：{ Id:01， 学生总数：2， 学生：[{ 姓名：Jhon， 年龄:18 }, { 姓名:Doe,， 年龄:18 }], 教师：[{ 姓名：简， 年龄:38 }, { 姓名:Doe,， 年龄:35 }] } } 我在使用可观测数据时是否遗漏了什么？

---

提前感谢

当您调用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方法被缩减为一行，所以大多数示例代码和实际代码都会将该调用内联到map函数中

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

---

控制台中有错误吗？打开控制台，也许你可以在这里看到关于CORS的错误。这不是CORS问题，我已经解决了。控制台上的第一个错误是：error TypeError:无法读取Object.eval[as updateRenderer]的undefined属性'school'ng:///AppModule/AppComponent.ngfactory.js:25:34 at Object.debugUpdaterEnder[作为UpdaterEnder]您可以尝试使用安全导航操作符吗？例如：{{{theData？.classic室？.Id}

我已经在app.component.html{{{theData？.classic室.Id}上添加了这个选项

。这允许等待数据a？.b.c，如果a为空，该数据将使进一步的评估短路。