Angular2解析HTTP响应

Question

我已修改快速入门教程以从以下 URL 获取帖子集合：https://jsonplaceholder.typicode.com/posts，但我只看到默认初始化值，而不是来自服务器的实际值。

其中一个元素如下所示：

  {
    "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"
  }

此对象表示为下面定义的 Post 类：

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

服务返回 Post[] 的 Observable

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

而Component订阅Observable获取数组并设置其属性：

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

如果我更改服务的提取函数以返回 body.data，我会看到一秒钟的默认值，然后为空。我已经调试了响应，我可以看到那里有 100 个元素的数组。

此外，如果我将所有内容从 Post 更改为字符串，我可以在屏幕上看到 100 个对象的列表。

Answer 1

在class MiComponente，改成这样：

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

在class PostService，改成这样：

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