error occurs when using ngFor - Angular 4

marcelo.delta Source

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())

    }
angular

Answers

answered 10 months ago Carsten #1

When your data of getEmpresas returns, the value of res is an Object {}

this.service.getEmpresas().subscribe((res) => {
    this.empresas = res
})

The *ngFor directive cannot iterate over Objects (unless you're using a KeysPipe). So either have getEmpresas() return an array or create said KeysPipe.

example:

import {PipeTransform, Pipe} from "@angular/core";

@Pipe({
  name: 'KeysPipe'
})
export class KeysPipe implements PipeTransform {
  transform(value, args:string[]) : any {
    let keys = [];
    for (let key in value) {
      keys.push({key: key, value: value[key]});
    }
    return keys;
  }
}

Usage:

*ngFor="let empresa of empresas | KeysPipe"
{{empresa.key}} {{empresa.value}}

answered 10 months ago Asim Hashmi #2

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

comments powered by Disqus