0

Estoy intentado iterar un array que contiene objetos, este array si itera en la consola pero no en la vista, lanzandome este error:

core.js:4352 ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.


Vista de angular en la que no se puede iterar (me lanza el error):

<ng-container *ngFor='let candidate of candidatesPresidential'>
     <div>{{candidate['Distrito Electoral']}}</div> //no itera
</ng-container>

Los datos que quiero iterar provienen de un servicio y son traídos mediante el ngOnInit:

import { CandidatesPresidentialService } from '../../../core/services/canditates-presidential.service';

@Component({
    selector: 'list-candidates',
    templateUrl: './list-candidates.component.html',
    styleUrls: ['./list-candidates.component.css'],
    providers: [CandidatesPresidentialService],
})
export class ListCandidatesComponent implements OnInit, OnDestroy {

    candidatesPresidential: Array<any>;

    constructor(
        private _candidatesPresidentialService: CandidatesPresidentialService,

    ) { }
    getMessageFromFrontComponent() {

        //traigo el array de mi servicio
        this.candidatesPresidential = this._candidatesPresidentialService.getCandidatesPresidential();

        //itera correctamente en la consola
        this.candidatesPresidential.forEach((element) => {
            console.log(element['Distrito Electoral']);
        });
    }

    ngOnInit(): void {
        this.getMessageFromFrontComponent();
    }
}

El servicio debe retornar un array bastante simple:

@Injectable()
export class CandidatesPresidentialService {

    listCandidatePresidential: Array<any>;

    constructor() {
        this.listCandidatePresidential = [
            {
                'Distrito Electoral': 'NACION',
                'Organización Política': 'ACCION POPULAR',
                'Tipo Organización Política': 'PARTIDO POLÍTICO',
                'Cargo': 'PRESIDENTE DE LA REPUBLICA',
                'N°': '1',
                'Primer apellido': 'BARNECHEA',
                'Segundo apellido': 'GARCIA',
                'Prenombres': 'ISAAC ALFREDO',
                Sexo: 'Masculino',
            },
            {
                'Distrito Electoral': 'NACION',
                'Organización Política': 'ACCION POPULAR',
                'Tipo Organización Política': 'PARTIDO POLÍTICO',
                'Cargo': 'PRIMER VICEPRESIDENTE DE LA REPUBLICA',
                'N°': '2',
                'Primer apellido': 'GARCIA',
                'Segundo apellido': 'BELAUNDE',
                Prenombres: 'VICTOR ANDRES',
                Sexo: 'Masculino',
            }
         ]
     }

    getCandidatesPresidential() {
        return this.listCandidatePresidential;
    }
}
2
  • Mmmm, es extraño intente replicar tu error pero me corre todo bien
    – Israel-ICM
    Commented el 15 oct. 2020 a las 15:04
  • Tal vez podrías intentar ver como llega el array en el HTML, poniendo algo así como <section>{{candidatesPresidential | json}}</section>, para ver con que tipo de estructura se encuentra, esa porción de código la pones antes o después de tu ng-container
    – Israel-ICM
    Commented el 15 oct. 2020 a las 15:06

1 respuesta 1

0

Te sale este error porque no incializas la variable candidatesPresidential: Array<any>; con un valor por defecto. Cuando el *ngFor intenta iterar esta variable aun será undefined y por eso sale este error.

Con esto debería solucionarse

candidatesPresidential: Array<any> = [];

O puedes poner otro ng-container con un ngIf para comprobar que candidatesPresidential tenga valor.

No puedes poner el ngIf en el mismo ng-container que el ngFor.

<ng-container *ngIf='candidatesPresidential && candidatesPresidential.length'>
  <ng-container *ngFor='let candidate of candidatesPresidential'>
     <div>{{candidate['Distrito Electoral']}}</div> //no itera
  </ng-container>
<ng-container *ngFor='let candidate of candidatesPresidential'>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.