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;
}
}
<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 tung-container