与嵌套对象成角度

时间:2020-08-12 18:25:50

标签: angular angular-reactive-forms

我创建了一个数组对象,并想在HTML文件的下拉列表中读取它。我准备了所有东西(Observables ...等),但是当我运行程序时,我得到了数组,但是数组对象中的字段为空。我写错了吗?

我的TS代码:

     // 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);
      }
    });
  }

我的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>

谢谢。

1 个答案:

答案 0 :(得分:1)

gammeAscenseurs.gamme不存在,因为gammeAscenseurs是一个数组。您应该在gammeAscenseurs[0].gamme内部调用ngFor