Angular 2 HTTP服務不返回承諾

Question

我正在嘗試獲取角度2服務以從HTTP請求中檢索數據並將其作為承諾返回。 當我在組件中使用該服務時，我從服務傳遞的數據將返回為undefined。

這是我的服務

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);
  }
}

這是我的組成部分

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));
    }
}

有什么想法數據未定義？

Answer 1

response.json（）已經將您的響應的數據對象作為JSON返回，因此刪除.data屬性訪問。

Answer 2

當你response.json() ，結果是你所做請求的響應的確切內容。

在這種情況下， https://jsonplaceholder.typicode.com/posts返回一個數組（如果在瀏覽器中打開你會看到數組的網址）： [{...}, {...}, ...] 。

Answer 3

從response.json().data刪除.data並添加|| {} || {}如果body為null

最后：

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