Error: Cannot find a different supporting object "object" of type "object". NgFor only supports binding to Iterables like arrays

I am successfully fetching data from jsonplaceholder fake api https://jsonplaceholder.typicode.com/posts

I am trying to link it using angular 2 {{}} but I am getting the following error. I have no idea what I am doing wrong if any body can help me and it will be complete. Below is the code and error.

Error: Cannot find a different supporting object "object" of type "object". NgFor only supports binding to Iterables like 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 Template:

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

      

        
        
        
      

    

Services:

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