angular - 错误: Cannot find a differ supporting object '[object Object]' of type 'object' . NgFor只支持绑定(bind)到Iterables比如Arrays

Question

我已经成功地从 jsonplaceholder fake api 获取数据 https://jsonplaceholder.typicode.com/posts

我正在尝试使用 angular 2 {{}} 绑定(bind)它，但出现以下错误。我不知道我做错了什么，如果有任何人可以帮助我，那将是满满的。以下是我的代码和错误。

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

import { Component } from '@angular/core';
import {BioService} from './bio.service'
import { Users } from './User';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app works!';
values : any;
users: Users[];
errorMessage: string;
mode = 'Observable';

profile = {};
constructor(private bioservice:BioService)
{

}

ngOnInit(){
     this.getHeroes();
     debugger;
}

  getHeroes() {
  this.bioservice.getHeroes().subscribe(data => this.profile = data);
 }

}

HTML 模板:

<h1>
<div>
<ul *ngFor= "let user of profile">
<li>{{user.userId}}</li>
</ul>
</div>
</h1>

服务:

        import { Injectable } from '@angular/core';
        import { Http, Response, Headers, RequestOptions } from '@angular/http';
        import {Observable} from 'rxjs/Rx';
        import 'rxjs/add/operator/map';
        import 'rxjs/add/operator/catch';
        import { Users } from './User';


        @Injectable()
        export class BioService {

        private url = 'http://bioapideploy.azurewebsites.net/api/Users';
        private placeholderurl = "https://jsonplaceholder.typicode.com/posts";

          constructor(private http: Http) { }

          getHeroes() {
            debugger;
            return this.http.get(this.placeholderurl)
            .map((res:Response) => res.json());
          }

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


          private handleError (error: Response | any) {
            // In a real world app, you might use a remote logging infrastructure
            debugger;
            let errMsg: string;
            if (error instanceof Response) {
              const body = error.json() || '';
              const err = body.error || JSON.stringify(body);
              errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
            } else {
              errMsg = error.message ? error.message : error.toString();
            }
            console.error(errMsg);
            return Observable.throw(errMsg);
          }
        }

Answer 1

在 AppComponent 中将 profile = {}; 更改为 profile: any[];