Angular Cannot find a differ supporting object '[object Object]' of type 'object'

Question

I'm making a get to an API in my Angular project and I get this JSON:

 {
        "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
        },
       
    },

I try to access personnelPosteListe in my HTML, but I got the 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? This 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>

Answer 1

I have read your article,you can use KeyValuePipe to get 'nomPersonnel' and 'prenomPersonnel'

<div *ngFor="let item of object | keyvalue">
  {{item.key}}:{{item.value}}
</div>

Oh, and you can also check out this post ,maybe have other good ideas