NgFor 不要在 mat-select html 语句中列出我的项目

Question

我有一个 class 获取对象“Saison”的列表，我想将它们列在 select 语句中：

@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 ?? [];
      }
    );
  }

}

赛森有这个型号：

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

订阅return这些值：

[
    {
        "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
    }
]

所以在我的 html 模板中，我使用 NgFor 将它们放入我的 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>

但是我的 mat-select 语句中什么也没有：

你明白为什么没有值吗？

PS ：我使用“Angular Material Design” (mat-select) 并遵循此文档：https://material.angular.io/components/select/overview 。我还在 vendor.scss 中添加了这个导入（对于 mat-slide-toggle 语句）。

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

是否缺少另一个特定的导入？

编辑 1

来自 HttpResponse 的 Console.log 结果：

Answer 1

看来你的代码没有问题~
所以我猜 saisonList 是空的。
我建议您尝试在 html 中使用 json 管道，并检查 saisonList 是否有价值。

Answer 2

我认为你的 html 在你获取数据之前渲染了，所以尝试 *ngIf="saisonList" on mat select

或将您的 return 值写在 getter 像这样：

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

并将 *ngFor 中的 saisonList 更改为数据（或您要为 getter 设置的任何名称）。

NgFor 不要在 mat-select html 语句中列出我的项目

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

angular

ngfor

编辑 1