Angular2解析HTTP响应
Angular2解析HTTP响应
提问于 2016-10-01 01:09:23
我已经修改了快速入门教程，以便从以下网址获取帖子的集合：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[]的可观察值
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 || { };
}组件订阅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更改为string，我可以在屏幕上看到100个对象的列表。
Stack Overflow用户
发布于 2017-12-28 08:13:53
在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());
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39796643
复制相关文章
相似问题
腾讯云开发者
