Encountering a problem while implementing ngFor in Angular 4

Question

Encountering a problem while implementing ngFor in Angular 4

Issue with ngFor Loop in Angular 4

Does anyone have insight into why this error is appearing in the console despite data being displayed?

The data is showing, but an error is still being thrown

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']">Explore Results</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

Answer 1

Answer №1

The cause of this issue is that you are attempting to iterate over a variable that is not iterable.
This is why ngFor is failing. Make sure that 'empresas' is an array of Empresa. Also, try logging the data received from the API response to check if it consists of an array of Empresa objects. The error message provides a clue.

NgFor only works with Iterables like Arrays

Answer 2

The cause of this issue is that you are attempting to iterate over a variable that is not iterable.
This is why ngFor is failing. Make sure that 'empresas' is an array of Empresa. Also, try logging the data received from the API response to check if it consists of an array of Empresa objects. The error message provides a clue.

NgFor only works with Iterables like Arrays

Answer 3

Answer №2

After calling the getEmpresas function, the returned data stored in the variable res is an Object {}

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

The *ngFor directive is unable to iterate over Objects (unless a KeysPipe is utilized). Therefore, it is recommended to modify the getEmpresas() function to return an array or implement the provided KeysPipe.

For 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 4

After calling the getEmpresas function, the returned data stored in the variable res is an Object {}

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

The *ngFor directive is unable to iterate over Objects (unless a KeysPipe is utilized). Therefore, it is recommended to modify the getEmpresas() function to return an array or implement the provided KeysPipe.

For 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 5

Answer №3

You have set the return value of getEmpresas() as an object, and *ngFor cannot iterate through an object. To solve this issue, you need to initialize an empty array by declaring empresas: any=[].

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

In your template, you can loop through the array using *ngFor like this:

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

Answer 6

You have set the return value of getEmpresas() as an object, and *ngFor cannot iterate through an object. To solve this issue, you need to initialize an empty array by declaring empresas: any=[].

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

In your template, you can loop through the array using *ngFor like this:

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

Answer 7

Answer №4

One possible solution is to use this code:

companies : any = [];

Answer 8

One possible solution is to use this code:

companies : any = [];

Encountering a problem while implementing ngFor in Angular 4

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is the best way to ensure that my variables are properly differentiated in order to prevent Angular --prod --aot from causing empty values at runtime?

Guide to aligning a fraction in the center of a percentage on a Materal Design progress bar

Why are @Inject and Injectable important in Angular's Dependency Injection system?

I prefer the value to switch to false whenever I navigate to a new route and then return to the previous route, as the sidebar remains open

Connecting RxJS Observables with HTTP requests in Angular 2 using TypeScript

What could be causing the error in Angular 2 when using multiple conditions with ng-if?

The issue arises when attempting to use the search feature in Ionic because friend.toLowerCase is not a valid function

Discovering all images in Angular

Trigger the Modal once the navigation step is completed

p-menu fails to appear

What are the steps for creating a TypeScript version of a custom CKEditor5 build?

Tips for assigning the 'store_id' value to a variable in Angular 6 within the Ionic4 environment

Error message: In my router module, Angular's 'Subject' is not subscribed to

Transform webservice data into TypeScript object format, ensuring mapping of objects from capital letters to camel case

Is there a more effective alternative to using the ternary condition operator for extended periods of time?

How do you implement an asynchronous validator for template-driven forms in Angular 2?

Error: The StsConfigLoader provider is not found! MSAL angular

Attempting to ensure that Angular 2 delays rendering until the necessary data has finished loading

Issue with NPM: Unable to locate the reference to 'Many' and the namespace '_' from the lodash library

Do I have to wait for the HTTP get request to access the fetched object property?