I have successfully pulled data from the jsonplaceholder fake API and now I am attempting to bind it using Angular 2 {{}} syntax. However, I encountered an error that states: "Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays." I'm unsure of what I might be doing wrong. Any help would be greatly appreciated. Below is my code snippet along with the error message.
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 Template:
<h1>
<div>
<ul *ngFor= "let user of profile">
<li>{{user.userId}}</li>
</ul>
</div>
</h1>
Service:
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);
}
}