Iterate an array of Objects from *ngFor - Angular

Question

my version is 13.0.4

I'm just trying to iterate from component.html with ngFor but it doesn't show and it makes the page bug. html:

<select>
    <option *ngFor="let region of regiones" value="{{ region.numero }}"> {{ region.nombre }} </option>
</select>

My Interface:

export interface Region {
    nombre: String,
    numero: number
}

I'm getting the regions in a Service (regiones.service.ts)

import { Injectable } from '@angular/core';
import { Region } from '../interfaces/regiones.interface';
import { HttpClient } from '@angular/common/http';


@Injectable({
  providedIn: 'root'
})
export class RegionesService {

  constructor(private _http: HttpClient) { }

  private _regiones: Region[] = [
      { nombre: 'Región Metropolitana de Santiago', numero: 0 },
      { nombre: 'Región de Arica y Parinacota', numero: 15 },
      { nombre: 'Región de Tarapacá', numero: 1 },
      { nombre: 'Región de Antofagasta', numero: 2 },
      { nombre: 'Región de Atacama', numero: 3 },
      { nombre: 'Región de Coquimbo', numero: 4 },
      { nombre: 'Región de Valparaíso', numero: 5 },
      { nombre: 'Región del Libertador General Bernardo O’Higgins.', numero: 6 },
      { nombre: 'Región del Maule', numero: 7 },
      { nombre: 'Región del Ñuble', numero: 16 },
      { nombre: 'Región del Biobío', numero: 8 },
      { nombre: 'Región de La Araucanía', numero: 9 },
      { nombre: 'Región de Los Ríos', numero: 14 },
      { nombre: 'Región de Los Lagos', numero: 10 },
      { nombre: 'Región de Aysén del General Carlos Ibáñez del Campo', numero: 11 },
      { nombre: 'Región de Magallanes y la Antártica Chilena', numero: 12 },
  ]
  

  getRegiones() { 
    return { ...this._regiones };
  }

}

Then I get them from a component: (inicio.component.ts)

export class InicioComponent implements OnInit {

  constructor(private regionesService: RegionesService) { }
  regiones: Region[] = this.regionesService.getRegiones()

  ngOnInit(): void {
    console.log(this.regiones);    
  }

}

This is what I got in the console:

console log image

Result:

result

error:

core.mjs:6469 ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
    at NgForOf.ngDoCheck (common.mjs:3156:27)
    at callHook (core.mjs:2536:1)
    at callHooks (core.mjs:2495:1)
    at executeInitAndCheckHooks (core.mjs:2446:1)
    at refreshView (core.mjs:9484:1)
    at refreshComponent (core.mjs:10640:1)
    at refreshChildComponents (core.mjs:9265:1)
    at refreshView (core.mjs:9519:1)
    at refreshEmbeddedViews (core.mjs:10594:1)
    at refreshView (core.mjs:9493:1)

nah0131 · Accepted Answer · 2022-02-23 21:55:10Z

1

The problem is your getRegiones() function:

return { ...this._regiones };

The return value of this function is an object - not an array. This is why Angular complains about not being able to loop trough it.

You could use *ngFor="let region of Object.values(regiones)" instead to convert it back to an array or change the result of the getRegiones() function.

answered Feb 23, 2022 at 21:55

nah0131

3311 silver badge8 bronze badges

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

2 Comments

Prieto Over a year ago

u right, that was the problem and thanks to you I realized. I did: getRegiones() { return [ ...this._regiones ]; } instead {}

nah0131 Over a year ago

Glad I could help. Consider marking the answer as correct, so others know that this problem has been resolved.

Collectives™ on Stack Overflow

Iterate an array of Objects from *ngFor - Angular

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related