Угловая 2 - Http с обещанием return Undefined

Question

i'am new на Angular2 и я пытаюсь получить данные из json-файла. Для этого я использую Http с Promise, но когда я делаю console.log из моей переменной обещания, они возвращают Undefined.

post.services.ts

import {Injectable} from '@angular/core'; 
import { Headers, Http, Response} from '@angular/http'; 
import {Observable} from 'rxjs/Observable'; 
import 'rxjs/add/operator/toPromise'; 
import {Post} from '../interfaces/post.interface'; 
@Injectable() 
export class PostService{ 
    private url = 'myjson.json'; 
    constructor(private http: Http){ } 
    private extractData(res: Response) { 
     let body = res.json(); 
     console.log(body.data); 
     return body.data || null; 
    } 
    getPosts(): Promise<Post[]>{ 
     return this.http.get(this.url) 
      .toPromise() 
      .then(this.extractData) 
      .catch(this.handleError); 
    } 
    private handleError(error: any) { 
     console.error('An error occurred', error); 
     return Promise.reject(error.message || error); 
    } 
} 

posts.component.js

import { Component, OnInit } from '@angular/core'; 
import { Router }   from '@angular/router'; 
import {PostService} from '../services/post.service'; 
import {Post} from '../interfaces/post.interface'; 

@Component({ 
    selector: 'posts', 
    template: 
    ` 
    <h1>Posts</h1> 
    <form (submit)="addPost()"> 
     <label for="title">Title</label> 
     <input type="text" [(ngModel)]="title" /> 
     <br /> 
     <label for="body">Body</label> 
     <input type="text" [(ngModel)]="body" /> 
     <br /> 
     <input type="submit" value="Submit" /> 
    </form> 
    <ul> 
     <li *ngFor="let post of posts"> 
      {{1+1}} 
      <h3>{{post.title}}</h3> 
     </li> 
    </ul> 
    `, 
}) 

export class PostsComponent implements OnInit{ 
    private posts:Post[]; 
    private title:string; 
    private body:string; 
    private newPost:Object; 
    error: any; 

    constructor(private _postService:PostService){} 
    getPosts(){ 
     this._postService.getPosts().then(posts => this.posts = posts).catch(error => this.error = error); 
    } 
    ngOnInit() {   
     this.getPosts(); 
     console.log(this.posts); 
    } 
    addPost(){ 
     this.newPost={ 
      title:this.title, 
      body:this.body 
     } 
    } 
} 

post.interface.ts

export interface Post{ 
    id: number; 
    userId: number; 
    title:string; 
    body:string; 
} 

Пожалуйста, кто-нибудь может мне помочь? Спасибо.

Answer 1

Это потому, что обещания/HTTP-запросы являются асинхронными. Вам нужно добавить console.log в ответ на обещания вашего HTTP-запроса. Если вы сделаете это за пределами этого обратного вызова (т. Е. Сразу после выполнения запроса), ответа больше нет, так что у вас будет неопределенный.

Вот пример:

getPosts(){ 
    this._postService.getPosts().then(posts => { 
     this.posts = posts; 
     console.log(this.posts); // not null 
    }).catch(error => this.error = error); 
} 

ngOnInit() {   
    this.getPosts(); 
    console.log(this.posts); // null 
} 

Редактировать

Я думаю, что проблема заключается в методе extractData. Вы не должны использовать body.data, если у вас нет имущества data в собственности вашего JSON.

private extractData(res: Response) { 
     let body = res.json(); 
     console.log(body); 
     return body || null; // <------- 
    }