Angular with nested Object

Question

I have created an array object and would like to read it in dropdownlists in the HTML file. I prepared everything (Observables ... etc) But when I run my program, I get the arrays, but the array objects I have the empty field. Did I write something wrong?

My TS code:

     // Elevator types //
      gammeAscenseurs = [
        {
          idAscenseur: 1,
          gamme: [
            {
              ascenseur: "e-BASICLIFT P",
              charge: "320 Kg 4 Personnes",
              dimensionCabine: "1000 x 900 x 2070",
              gaine: "1400 x 1400",
              portes: "T2H-700 x 2000",
              fosse: 1200,
              hors_course: 3600,
              vitesse: 1.0,
            },
            {
              ascenseur: "e-BASICLIFT P",
              charge: "450 Kg 6 Personnes",
              dimensionCabine: "1150 x 1100 x 2070",
              gaine: "1500 x 1600",
              portes: "T2H-800 x 2000",
              fosse: 1200,
              hors_course: 3600,
              vitesse: 1.0,
            },
            {
              ascenseur: "e-BASICLIFT P",
              charge: "630 Kg 8 Personnes",
              dimensionCabine: "1100 x 1400 x 2070",
              gaine: "1500 x 1900",
              portes: "T2H-800 x 2000",
              fosse: 1200,
              hors_course: 3600,
              vitesse: 1.0,
            },
            {
              ascenseur: "e-BASICLIFT P",
              charge: "750 Kg 10 Personnes",
              dimensionCabine: "1400 x 1350 x 2070",
              gaine: "1800 x 1900",
              portes: "T2H-700 x 2000",
              fosse: 1200,
              hors_course: 3600,
              vitesse: 1.0,
            },
          ],
        },
      ];

getGammeAscenseurs() {
    return new Observable((observer) => {
      if (this.gammeAscenseurs && this.gammeAscenseurs.length > 0) {
        observer.next(this.gammeAscenseurs);
        observer.complete();
      } else {
        const error = new Error("Type Ascenseur Introuvable ou Invalide");
        observer.error(error);
      }
    });
  }

My HTML :

<mat-form-field>
      <mat-label>Charge (Kg)</mat-label>
      <mat-select formControlName="charge">
        <mat-option value="" disabled>Choisir :</mat-option>
        <mat-option value="" *ngFor="let charge of gammeAscenseurs.gamme">{{
          charge.charge
        }}</mat-option>

Thank you in advance.

Answer 1

gammeAscenseurs.gamme does not exist, since gammeAscenseurs is an array. you should be calling gammeAscenseurs[0].gamme inside the ngFor.