CODEWITHSUNDEEP
angular
marcelo.delta
marcelo.delta

Reputation: 3082

error occurs when using ngFor - Angular 4

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

    }

Upvotes: 1

Views: 4199

Answers (4)

Abdoulaye Diallo
Abdoulaye Diallo

Reputation: 1

You can do something like:

empresas : any = [];

Upvotes: 0

user9744623
user9744623

Reputation:

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>

Upvotes: 0

asimhashmi
asimhashmi

Reputation: 4378

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

Upvotes: 1

Carsten
Carsten

Reputation: 4208

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

Upvotes: 0

Related Questions