title: Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays
body: <p>I have successfully fetch data from jsonplaceholder fake api <a href="https://jsonplaceholder.typicode.com/posts" rel="nofollow noreferrer">https://jsonplaceholder.typicode.com/posts</a></p>
  
  <p>I am trying to bind it using angular 2 {{}} but i am getting following error. I have no clue what i am doing wrong if any body could help me that will be grate full. Below is my code and error.</p>
  
  <blockquote>
    <p>Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.</p>
  </blockquote>
  
  <pre><code>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 =&gt; this.profile = data);
   }
  
  }
  </code></pre>
  
  <p>HTML Template:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;h1&gt;
  &lt;div&gt;
  &lt;ul *ngFor= "let user of profile"&gt;
  &lt;li&gt;{{user.userId}}&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/h1&gt;
  </code></pre>
  
  <p>Service:</p>
  
  <pre><code>        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) =&gt; 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);
            }
          }
  </code></pre>