Issue
error occurs when using ngFor - Angular 4
Would anyone know how to tell why this error is being displayed on the console when I perform the function
The data is being displayed, however this error is still shown
empresas = <Empresa> {};
constructor(private service: Service) { }
ngOnInit() {
this.service.getEmpresas().subscribe((res) => {
this.empresas = res
})
}
Template
<tr *ngFor="let empresa of empresas">
<td>
{{ empresa.created_at }}
</td>
<td>
{{ empresa.nome }}
</td>
<td class="text-center">
{{ empresa.protocolo }}
</td>
<td class="text-right">
<a [routerLink]="['/resultado']">Explorar resultado</a>
</td>
</tr>
HistoricoComponent.html:37 ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays. at NgForOf.webpackJsonp.../../../common/@angular/common.es5.js.NgForOf.ngOnChanges (common.es5.js:1681) at checkAndUpdateDirectiveInline (core.es5.js:10833) at checkAndUpdateNodeInline (core.es5.js:12332) at checkAndUpdateNode (core.es5.js:12271) at debugCheckAndUpdateNode (core.es5.js:13132) at debugCheckDirectivesFn (core.es5.js:13073) at Object.eval [as updateDirectives] (HistoricoComponent.html:37) at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:13058) at checkAndUpdateView (core.es5.js:12238) at callViewAction (core.es5.js:12603)
service
getEmpresas(): Observable<any> {
const headers = new Headers();
return this.http.get(`${MEAT_API}/empresas`,
new ResponseOptions({headers: headers}))
.map(response => response.json())
}
Solution
The reason of this error is that your iterating over the variable which is not iteratable.
That's the reason ngFor
is failing, make sure empresas is array of Empresa
, try consoling the res
coming from the API to see if it's any array of Empresa
objects. The error describes itself.
NgFor only supports binding to Iterables such as Arrays
Answered By - asimhashmi
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.