error occurs when using ngFor - Angular 4

Question

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

    }

Answer 1

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

Answer 2

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

Answer 3

you can do something like empresas any = [];

Answer 4

You assigned the response value of getEmpresas() is an object ,and *ngFor is unable to iterate an object that's why you have to declare an array, declare empresas: any=[]` as an empty array.

this.service.getEmpresas().subscribe(res=>this.empresas=res);

In the template you can traverse the array using *ngFor like

<tr *ngFor="let empresa of empresas">
>     <td>
>         {{ empresa.created_at }}
>     </td>
>     <td>
>         {{ empresa.nome }}
>     </td>
>     <td class="text-center">
>         {{ empresa.protocolo }}
>     </td>
 </tr>