각도 2 - 약속 반환에 대한 HTTP 정의되지 않음

Question

Angular2에 새 버전이 있는데 json 파일에서 데이터를 가져 오려고합니다. 이 약속을 사용하여 Http 사용하지만 내 약속 변수에서 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 요청이 비동기이기 때문입니다. HTTP 요청에 대한 약속의 콜백 내에 console.log을 추가해야합니다. 이 콜백 외부에서 (즉 요청을 실행 한 직후에) 수행하면 응답이 더 이상 존재하지 않으므로 정의되지 않은 상태가됩니다.

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 방법이라고 생각 : 여기

는 샘플입니다. JSON 속성에 data 속성이 없으면 body.data을 사용하면 안됩니다.

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