Angular 2 - Http mit Versprechen Rückkehr Undefined

Question

ich bin neu auf Angular2 und ich versuche, Daten aus einer JSON-Datei zu bekommen. Um dies zu tun, benutze ich Http mit Promise, aber wenn ich console.log von meiner Versprechungsvariable mache, geben sie Undefined zurück.

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

Bitte jemand kann mir helfen? Vielen Dank.

Answer 1

Es ist, weil Versprechen/HTTP-Anfragen asynchron sind. Sie müssen console.log innerhalb des Rückrufs der Versprechen für Ihre HTTP-Anfrage hinzufügen. Wenn Sie dies außerhalb dieses Rückrufs tun (d. H. Gleich nach dem Ausführen der Anfrage), ist die Antwort nicht mehr da, also haben Sie ein undefiniertes. Hier

ist ein Beispiel:

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 
} 

bearbeitet

Ich denke, dass das Problem in Ihrer extractData Methode. Sie sollten body.data nicht verwenden, außer Sie haben eine data Eigenschaft in Ihrer JSON-Eigenschaft.