Angular - *ngFor 仅从数组返回一条记录，尽管有 12 条记录可用

Question

我在 Angular 中使用 HttpClient 从我使用 SpringBoot 创建的 API 端点检索数据。我在 Angular 中创建了一个服务来使用数据。我正在将数据打印到控制台，所以我知道数据正在返回。我试图将所有输出传递到下拉列表，但尽管使用 *ngFor，但只返回 1 个结果：以下是 HTML 文件中下拉列表的代码：  <mat-form-field>    <mat-select    placeholder="Select Competition">      <mat-option *ngFor="let comp of competitionsList; let i = index" [value]="comp">        {{ comp[i].name }}      </mat-option>    </mat-select>  </mat-form-field>当我出于测试目的将 [i] 的值更改为或 [11] （数组中的最后一个元素）时，所有数据始终按预期显示，但当我使用 comp[i].name 时，我会预期所有元素在要返回的数组中，但它只返回第一个元素。我确信这是非常简单的事情，但我已经研究了很长时间，但仍然不太明白为什么会发生这种情况，所以任何帮助将不胜感激！JSON 响应：[{…}]0:0: {id: 2013, name: "Série A"}1: {id: 2021, name: "Premier League"}2: {id: 2016, name: "Championship"}3: {id: 2001, name: "UEFA Champions League"}4: {id: 2018, name: "European Championship"}5: {id: 2015, name: "Ligue 1"}6: {id: 2002, name: "Bundesliga"}7: {id: 2019, name: "Serie A"}8: {id: 2003, name: "Eredivisie"}9: {id: 2017, name: "Primeira Liga"}10: {id: 2014, name: "Primera Division"}11: {id: 2000, name: "FIFA World Cup"}ident: "competitions"name: "com"**添加附加信息：我已经为 API 返回的值定义了一个接口：export interface Competitions {  id: number;  name: string;}这是我的服务：  retrieveAvailableCompetitions() {    return this.http.get<Competitions>(this.competitionsUrl);  }这是我在 TypeScript 文件中的方法：getCompetitons() {  this.service.retrieveAvailableCompetitions().pipe(    map(responseData => {      const compsList: Competitions[] = [];      for (const key in responseData) {        if (responseData.hasOwnProperty(key)) {          compsList.push({ ...responseData[key], ident: key, name: 'com' });        }      }      return compsList;    })  ).subscribe(    compsList => {      this.competitionsList = compsList;      console.log(compsList);    });  }

Answer 1

您在评论中提到了undefined错误。这表明您正在尝试在数据可用之前渲染视图。在您的元素上使用*ngIf以仅在数据可用时呈现它。

<mat-form-field *ngIf="competitionsList">

</mat-form-field>

当您使用迭代数组时，*ngFor不需要使用索引i。

替换{{ comp[i].name }}为{{ comp.name }}.

那么你的代码将如下所示

  <mat-form-field *ngIf="competitionsList">

    <mat-select placeholder="Select Competition">

      <mat-option *ngFor="let comp of competitionsList; let i = index" [value]="comp">

        {{ comp.name }}

      </mat-option>

    </mat-select>

  </mat-form-field>

StackBlitz 上的现场演示： https://stackblitz.com/edit/angular-material-with-angular-v5-eukdkc

编辑：您应该将响应格式化compList为competitionsList数组。

将您的subscribe()方法更改为

.subscribe(

   compsList => {

      this.competitionsList = Object.values(compList[0]);

   });