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 }}.那么你的代码将如下所示&nbsp; <mat-form-field *ngIf="competitionsList">&nbsp; &nbsp; <mat-select placeholder="Select Competition">&nbsp; &nbsp; &nbsp; <mat-option *ngFor="let comp of competitionsList; let i = index" [value]="comp">&nbsp; &nbsp; &nbsp; &nbsp; {{ comp.name }}&nbsp; &nbsp; &nbsp; </mat-option>&nbsp; &nbsp; </mat-select>&nbsp; </mat-form-field>StackBlitz 上的现场演示： https://stackblitz.com/edit/angular-material-with-angular-v5-eukdkc编辑：您应该将响应格式化compList为competitionsList数组。将您的subscribe()方法更改为.subscribe(&nbsp; &nbsp;compsList => {&nbsp; &nbsp; &nbsp; this.competitionsList = Object.values(compList[0]);&nbsp; &nbsp;});