In my Angular project, I am calling an API and receiving the following JSON data:
{
"id": 16,
"poste": "ameur taboui",
"desciption": "f",
"service": "f",
"creationDate": "2022-10-13",
"updatedDate": "2022-10-24",
"active": true,
"personnelPosteListe": {
"id": 1,
"nomPersonnel": "ADMIN",
"prenomPersonnel": "ADMIN",
"matricule": 2564,
"dateNaissance": "2022-07-26",
"cin": 7858585,
"telephone": 2554884,
"adresse": "tunis",
"dateAff": "2022-07-26",
"dateFinAff": "2022-07-26",
"typeContrat": "test",
"champInterim": "f",
"active": true
},
},
When trying to access personnelPosteListe in my HTML, I encountered the following error:
Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays. Any help on this? Here is my TS file:
onGetPosteListeByID() {
this.grhService
.getPosteListeById(this.id)
.pipe(takeUntil(this.onDestroy$))
.subscribe(
(data) => {
this.poste = data;
console.log(this.poste);
},
(err) => {
console.log(err);
}
);
}
}
This is my HTML :
<table class="table table-striped table-hover table-bordered text-center table-centre table-res">
<thead class="thead-light">
<tr>
<th> {{"Nom" | translate }} </th>
<th> {{"Prénom" | translate }}</th>
<th> {{"Type de contrat" | translate}}</th>
<th> {{"Matricule" | translate }}</th>
<th> {{"Telephone" | translate }}</th>
</tr>
<tr *ngFor="let b of poste?.personnelPosteListe ; trackBy: trackByMethod ">
<td> {{ b?.nomPersonnel}}</td>
<td> {{ b?.prenomPersonnel }}</td>
.
.
.
.
</tr>
</thead>
</table>