Javascript Angular 2 HTTP服务未返回承诺

我正在尝试使用angular 2服务从HTTP请求中检索数据，并将其作为承诺返回。当我在组件中使用服务时，我从服务传递的数据返回为未定义

这是我的服务

import { Injectable }     from '@angular/core';
import { Http, Response } from '@angular/http';
import 'rxjs/add/operator/toPromise';

@Injectable()

export class RecordService {
  constructor(private http: Http) {}
  getPosts(): Promise<any> {
    return this.http
      .get('https://jsonplaceholder.typicode.com/posts')
      .toPromise()
      .then((response: Response) => response.json().data)
      .catch(this.handleError);
  }

  private handleError(error: any): Promise<any> {
    console.error('An error occurred', error);
    console.log('ERROR');
    return Promise.reject(error.message || error);
  }
}

从'@angular/core'导入{Injectable}；
从'@angular/Http'导入{Http，Response}；
导入“rxjs/add/operator/toPromise”；
@可注射（）
导出类记录服务{
构造函数（私有http:http）{}
getPosts（）：承诺{
返回此文件。http
.get（'https://jsonplaceholder.typicode.com/posts')
.toPromise（）
.then（（response:response）=>response.json（）.data）
.接住（这个.把手错误）；
}
私有句柄错误（错误：任意）：承诺{
console.error（'发生错误'，error）；
console.log（'ERROR'）；
返回承诺。拒绝（error.message | | error）；
}
}

这是我的组件

import { Component, OnInit } from '@angular/core';
import { RecordService } from './record.service';
import { Router } from '@angular/router';

@Component({
    selector: 'record-view',
    template: '<h1>This is the record creation page</h1>',
    providers: [RecordService]
})

export class RecordComponent implements OnInit{
    message: string;
    error: any;

    constructor(private recordService: RecordService) { 

    }

    ngOnInit() {
        this.recordService.getPosts()
            .then(data => console.log(data))
            .catch(error => console.log(error));
    }
}

从'@angular/core'导入{Component，OnInit}；
从“./record.service”导入{RecordService}；
从'@angular/Router'导入{Router}；
@组成部分({
选择器：“记录视图”，
模板：“这是记录创建页面”，
提供者：[记录服务]
})
导出类RecordComponent实现OnInit{
消息：字符串；
错误：任何；
构造函数（私有记录服务：记录服务）{
}
恩戈尼尼特（）{
this.recordService.getPosts（）
.then（数据=>console.log（数据））
.catch（错误=>console.log（错误））；
}
}

---

知道为什么数据没有定义吗？

response.json（）已经将响应的数据对象作为json返回给您，因此请删除.data属性访问。

当您

response.json（）

时，结果就是您请求的响应的确切内容

在这种情况下，

https://jsonplaceholder.typicode.com/posts

返回一个数组（如果在浏览器中打开url，您将看到该数组）：

[{…}，{…}，…]

来自

response.json（）.data

删除

.data

并在body为null时添加

|{}

最后：

.then((response: Response) => response.json() || {})

---

JSON也可以是数组。谢谢！这是一个比我预想的简单得多的解决方案！