NgFor dont list my items in the mat-select html statement

Question

I have a class which get a list of object "Saison" and I want to list them to a select statement:

@Component({
  selector: 'jhi-saisons',
  templateUrl: './saison-home.component.html',
})
export class SaisonHomeComponent implements OnInit {

  saisonList?: ISaison[];

  constructor(protected saisonService: SaisonService) {}

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

  /**
   * Charge toutes les saisons dans la propriété saisonList
   */
  loadAllSaisons(): void {
    const sortOrder = { sort: ['anneeSaison'] };

    this.saisonService.query(sortOrder).subscribe(
      (res: HttpResponse<ISaison[]>) => {
        this.saisonList = res.body ?? [];
      }
    );
  }

}

Saison has this model:

export interface ISaison {
  id?: number;
  anneeSaison?: string;
  estActiveSaison?: boolean | null;
}

export class Saison implements ISaison {
  constructor(public id?: number, public anneeSaison?: string, public estActiveSaison?: boolean | null) {
    this.estActiveSaison = this.estActiveSaison ?? false;
  }
}

export function getSaisonIdentifier(saison: ISaison): number | undefined {
  return saison.id;
}

subscribe return these values:

[
    {
        "id": 1,
        "anneeSaison": "2019",
        "estActiveSaison": false
    },
    {
        "id": 2,
        "anneeSaison": "2020",
        "estActiveSaison": false
    },
    {
        "id": 3,
        "anneeSaison": "2021",
        "estActiveSaison": true
    },
    {
        "id": 4,
        "anneeSaison": "2022",
        "estActiveSaison": false
    },
    {
        "id": 5,
        "anneeSaison": "2023",
        "estActiveSaison": false
    }
]

So in my html template, I use NgFor for put them in my select:

 <mat-form-field  apparence = "fill">
    <mat-label jhiTranslate="pdf4PwebApp.saison.dashboard.selectSaison">SELECT SAISON</mat-label>
    <mat-select >
      <mat-option *ngFor="let saison of saisonList" [value]="saison.id">
        {{saison.anneeSaison}}
      </mat-option>

    </mat-select>
  </mat-form-field>

But ther is nothing in my mat-select statement:

Do you understand why there is no values?

PS: I use "Angular Material Design" (mat-select) and I follow this doc: https://material.angular.io/components/select/overview . I have also add this import in vendor.scss (for mat-slide-toggle statement).

@import '~@angular/material/prebuilt-themes/indigo-pink.css';

Is there another specific import missing?

EDIT 1

Result of Console.log from HttpResponse:

Answer 1

I think your html rendered before you get data, so try *ngIf="saisonList" on mat select

or write your return value in a getter like this:

   get data(): ISaison[] {
    return this.saisonList;                                      
   }

and change saisonList in *ngFor to data(or any name you want to set for getter).

Answer 2

It seems there is no problem in your code~
So I guess saisonList is empty.
I suggest you try to use json pipe in your html, and check if saisonList do have value.