アングル2 HTTPサービスが約束を返さない

Question

私は、HTTPリクエストからデータを取得し、それを約束として返すアングル2サービスを取得しようとしています。コンポーネントでサービスを使用すると、サービスから渡されたデータが未定義として返されます。

これは私のサービス

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は配列を返します（ブラウザにURLを開くと、配列が表示されます）：[{...}, {...}, ...]。

Answer 3

response.json().dataから.dataを削除して、体が最後に

nullの場合|| {}を追加します。

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