error occurs when using ngFor - Angular 4

Question

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

    }

can you show the service method that is called does it return a array or objects have you called res.json() in http service — Rahul Singh
– Rahul Singh, Commented Sep 7, 2017 at 6:08
Because ngFor iterates only through array items, as I can see you have object. — Anton Lee
– Anton Lee, Commented Sep 7, 2017 at 6:11

asimhashmi · Accepted Answer · 2017-09-07 06:15:14Z

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

answered Sep 7, 2017 at 6:15

asimhashmi

4,3861 gold badge17 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Carsten · Accepted Answer · 2017-09-07 06:15:13Z

0

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 Sep 7, 2017 at 6:15

Carsten

4,22826 silver badges30 bronze badges

Comments

score 0 · Accepted Answer · 2020-02-16 16:45:52Z

0

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>

edited Feb 16, 2020 at 16:45

answered Mar 24, 2019 at 4:41

user9744623

Comments

Adrian Mole · Accepted Answer · 2022-03-22 15:46:38Z

0

You can do something like:

empresas : any = [];

edited Mar 22, 2022 at 15:46

Adrian Mole

52.2k193 gold badges61 silver badges101 bronze badges

answered Dec 2, 2019 at 17:58

Abdoulaye Diallo

14 bronze badges

1 Comment

the Tin Man Over a year ago

See "Explaining entirely code-based answers". While this might be technically correct, it doesn't explain why it solves the problem or should be the selected answer. We should educate along with helping solve the problem.

Collectives™ on Stack Overflow

error occurs when using ngFor - Angular 4

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related