Question

我在向页面输出JSON数据时遇到问题。我可以使用console.log将JSON对象输出到控制台，但不能使用angular输出页面。我还是新手。任何人都可以指出我哪里出错了。

错误：

Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

post.service.ts

import {Http} from '@angular/http';
import 'rxjs/add/operator/map';
import {Injectable} from "@angular/core";
import {Post} from './post';

@Injectable()
export class PostService{

constructor(private _http:Http){


}
getPosts(){
return this._http.get('https://jsonplaceholder.typicode.com/posts')
.map(res => res.json());

}
}

app.component.ts

import { Component } from '@angular/core';
import {PostService} from './post.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [PostService]
})
export class AppComponent {
private posts;

constructor(private _postService:PostService){
this.posts =_postService.getPosts();


}
}

app.component.html

<h1>
<ul>
<li *ngFor="let post of posts">
{{post.title}}
</li>

</ul>
</h1>

post.ts

export class Post{
id?: number;
body: string;
title: string;


}

Answer 1

您需要订阅到您的http请求以获取数据并显示它，您当前正在尝试迭代Observable，这是不可能的。您还应该使用OnInit代替constructor：

import { Component, OnInit } from '@angular/core';
import { PostService } from './post.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [PostService]
})

export class AppComponent {

private posts;

constructor(private _postService:PostService) {}

ngOnInit() {
    this._postService.getPosts().subscribe(
    (res) => {
     this.posts = res; <--
     });
}

}

这里有关于使用Observables的http请求的article很好，它也有例子。

Answer 2

类getPost中的函数PostService返回一个Observable，而不是对象。传统的方法是订阅并分配返回值。

this._postService.getPosts().subscribe(result => this.posts = result);

或者，您可以make use of the async pipe，这是首选的做事方式。

this.posts$ = this._postService.getPosts();

在HTML模板中使用异步管道;例如：

<span>{{ posts$ | async | json }}</span>

顺便说一句，这个基本行为已在Tour of Heroes (ToH)，官方＆＃34;入门＆＃34; Angular的教程，它高度基于实际应用程序。

将JSON输出到页面

2 个答案: