Angular2 Parsing HTTP-Antwort

Question

Ich habe das Quickstart-Tutorial geändert, um eine Sammlung von Posts von der folgenden URL zu erhalten: https://jsonplaceholder.typicode.com/posts, aber ich sehe nur die Standard-Initialisierungswerte, nicht die tatsächlichen Werte vom Server.

Eines der Elemente wie folgt aussieht:

{ 
    "userId": 1, 
    "id": 1, 
    "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit", 
    "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto" 
    } 

Dieses Objekt dargestellt wird, als unten definierte Beitrag Klasse:

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

Der Dienst gibt einen beobachtbaren des Beitrags []

import { Post } from './post' 

@Injectable() 
export class PostService{ 
    private postUrl = 'https://jsonplaceholder.typicode.com/posts'; 

    constructor (private http: Http) {} 

    public getPosts(): Observable<Post[]> { 
    return this.http.get(this.postUrl) 
        .map(this.extractData); 

    } 

    private extractData(res: Response) { 
    let body = res.json(); 
    return body.data || { }; 
    } 

Und die Komponente subskribiert das Observable, um das Array zu erhalten und sein Attribut einzustellen:

import { Post } from './post' 
import { PostService } from './postservice.service' 

@Component({ 
    selector:'mi-comp', 
    template: `<h1>Embedded Component</h1> 

     <ul> 
     <li *ngFor="let post of posts"> 
     {{post.id }} {{post.title }} 
     </li> 
     </ul> 
    `, 
    providers: [PostService] 
}) 

export class MiComponente 
{ 
    posts: Post[] = 

    [{ 
    "userId": 1, 
    "id": 1, 
    "title": "sunt aut facere repellat provident occaecati excepturi optio   reprehenderit", 
    "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto" 
    }, 
    { 
    "userId": 1, 
    "id": 2, 
    "title": "qui est esse", 
    "body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla" 
    }, 
    { 
    "userId": 1, 
    "id": 3, 
    "title": "ea molestias quasi exercitationem repellat qui ipsa sit aut", 
    "body": "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut" 
    }]; 

    errorMessage: string; 
    counter = 0; 

    constructor(private postService: PostService){ 

    this.postService.getPosts() 
          .subscribe(
          posts => this.posts = posts, 
          error => this.errorMessage = <any>error); 
} 

Wenn ich die Extraktfunktion des Dienstes ändern, um body.data zurückzukehren, sehe ich die Standardwerte für eine Sekunde, und dann leer. Ich habe die Antwort überprüft, und ich kann das 100-Elemente-Array dort sehen.

Wenn ich alles von Post zu String ändere, kann ich eine Liste von 100 Objekten auf dem Bildschirm sehen.

Answer 1

In class MiComponente, um dies zu ändern:

import { Component } from '@angular/core'; 
import { OnInit } from '@angular/core/src/metadata/lifecycle_hooks'; 
import { PostService } from './postservice.service' 

@Component({ 
    selector:'mi-comp', 
    template: `<h1>Embedded Component</h1> 
     <ul *ngFor="let post of posts"> 
      <li>{{post.id }}</li> 
      <li>{{post.title }}</li> 
      <li> {{post.body}} </li> 
     </ul>`, 
    providers: [PostService] 
}) 

export class MiComponente implements OnInit 
{ 
    posts []; 

    errorMessage: string; 

    constructor(private postService: PostService){} 

    ngOnInit(){ 
     this.postService.getPosts().subscribe(posts => this.posts = posts, error => this.errorMessage = error); 
    } 
} 

In class PostService, Änderung dieser:

import {Injectable} from '@angular/core'; 
import {Http, Response} from '@angular/http'; 
import 'rxjs/add/operator/map'; 

@Injectable() 
export class PostService{ 
    private postUrl = 'https://jsonplaceholder.typicode.com/posts'; 

    constructor (private http: Http) {} 

    public getPosts(): Observable { 
     return this.http.get(this.postUrl).map((response: Response) => response.json()); 
    } 
}