Java Angular-*用于仅从阵列返回一条记录，尽管有12条记录可用

我正在Angular中使用HttpClient从使用SpringBoot创建的API端点检索数据

我已经在Angular中创建了一个服务来使用数据。我正在将数据打印到控制台，因此我知道数据正在返回

我试图将所有输出传递到下拉列表，但尽管使用了*ngFor，但只返回了一个结果：

以下是用于下拉列表的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>

**添加其他信息：

我已经为API将返回的值定义了一个接口：

export interface Competitions {
  id: number;
  name: string;
}

这是我的服务：

  retrieveAvailableCompetitions() {
    return this.http.get<Competitions>(this.competitionsUrl);
  }

---

（我知道我应该将大部分代码转移到我的服务中，但我计划在解决问题后进行重构）

您在关于

未定义的
错误的评论中提到过。这表示您试图在数据可用之前渲染视图。在元素上使用
*ngIf
仅在数据可用时渲染它

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

</mat-form-field>

StackBlitz现场演示：

编辑：您应该格式化您的响应
compList
以形成
竞争列表
数组

将
subscribe（）
方法更改为

.subscribe(
   compsList => {
      this.competitionsList = Object.values(compList[0]);
   });

您在评论中提到了
未定义的
错误。这表示您试图在数据可用之前渲染视图。在元素上使用
*ngIf
仅在数据可用时渲染它

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

</mat-form-field>

StackBlitz现场演示：

编辑：您应该格式化您的响应
compList
以形成
竞争列表
数组

将
subscribe（）
方法更改为

.subscribe(
   compsList => {
      this.competitionsList = Object.values(compList[0]);
   });

你能分享api的回应吗？[{…}]0:0:{id:2013，名字：“赛里A”}1:{id:2021，名字：“英超联赛”}2:{id:2016，名字：“冠军联赛”}3:{id:2018，名字：“欧洲冠军赛”}4:{id:2001，名字：“欧冠联赛”}5:{id:2015，名字：“法甲联赛”}6:{id:2002，名字：“德甲联赛”}7:{id:2019 8:{id:2003，名称：“欧洲联赛”}9:{id:2017，名称：“西甲联赛”}10:{id:2014，名称：“西甲联赛”}11:{id:2000，名称：“国际足联世界杯”}标识：“比赛”名称：“com”外部数组元素的长度为1（我认为可能是引起问题的原因），但正如您所看到的，内部数组中有12项。您可以发布字符串化响应吗，控制台日志响应使其有点奇怪，并且不知道完整的结构，即是否存在嵌套数组？请从
console.log（JSON.stringify（compsList））
[{“0”：{“id”：2013，“name”：“Série a”}，“1”：{“id”提供结果：2021，“名称”：“英超联赛”}，“2”：{“id”：2016，“名称”：“冠军联赛”}，“3”：{“id”：2001，“名称”：“欧洲冠军联赛”}，“4”：{“id”：2018，“名称”：“欧洲冠军联赛”}，“5”：{“id”：2015，“名称”：“Ligue 1”}，“6”：{“id”：2002，“名称”：“德甲”}，“7”：{“id”：2019，“名称”：“意甲”}，“8”：{“id”：2003，“名称”：“埃雷迪西”}，“9”：“id”：2017，“名称”：“英超”{：2014，“姓名”：“Primera Division”}，“11”：{“id”：2000，“姓名”：“FIFA World Cup”}]你能分享api的回应吗？[{…}0:0:{id:2013，姓名：“Série A”}1:{id:2021，姓名：“Premier League”}2:{id:2016，姓名：“Championship”}3:{id:2018，姓名：“欧洲锦标赛”}4:{id:2001，姓名：“欧洲冠军联赛”}5:{id:2015，姓名：“Ligue 1”}6:{id:2002，名称：“德甲联赛”}7:{id:2019，名称：“意甲联赛”}8:{id:2003，名称：“欧洲联赛”}9:{id:2017，名称：“英超联赛”}10:{id:2014，名称：“英超联赛”}11:{id:2000，名称：“国际足联世界杯”}标识：“比赛”名称：“com”外部数组元素的长度为1（我认为可能是引起问题的原因），但正如您所看到的，内部数组中有12项。您可以发布字符串化响应吗，控制台日志响应使其有点奇怪，并且不知道完整的结构，即是否存在嵌套数组？请从
console.log（JSON.stringify（compsList））
[{“0”：{“id”：2013，“name”：“Série a”}，“1”：{“id”提供结果：2021，“名称”：“英超联赛”}，“2”：{“id”：2016，“名称”：“冠军联赛”}，“3”：{“id”：2001，“名称”：“欧洲冠军联赛”}，“4”：{“id”：2018，“名称”：“欧洲冠军联赛”}，“5”：{“id”：2015，“名称”：“Ligue 1”}，“6”：{“id”：2002，“名称”：“德甲”}，“7”：{“id”：2019，“名称”：“意甲”}，“8”：{“id”：2003，“名称”：“埃雷迪西”}，“9”：“id”：2017，“名称”：“英超”{：2014，“name”：“Primera Division”}，“11”：{“id”：2000，“name”：“FIFA World Cup”}]感谢您的回复，但这不起作用。当我按照您的建议使用代码时，它输出一个存在于外部数组中的值“comp”。我使用了{comp[I].name}要进入内部阵列，在下拉列表中显示，意甲，英超，etc@tillyno2-您能用JSON格式的
CompetitionList
值更新您的问题吗？我已经尝试过了（我在原始问题中应该提到的抱歉）。但是当我使用CompetitionList[0]，我收到一个类型错误：错误TypeError:无法读取undefinedOkay的属性“0”，此错误表示
CompetitionList
未定义。请确保在数据可用之前您未呈现视图。我将用修复此错误的方法更新我的答案。@tillyno2-查看我编辑的答案。让我知道进展如何。感谢回复ponse，但这不起作用。当我按照您的建议使用代码时，它会输出一个存在于外部数组中的值“comp”。我使用了{comp[I].name}要进入内部阵列，在下拉列表中显示，意甲，英超，etc@tillyno2-您能用JSON格式的
CompetitionList
值更新您的问题吗？我已经尝试过了（我在原始问题中应该提到的抱歉）。但是当我使用CompetitionList[0]，我得到一个类型错误：错误TypeError:无法读取undefinedOkay的属性“0”，此错误表示
CompetitionList
未定义。请确保
.subscribe(
   compsList => {
      this.competitionsList = Object.values(compList[0]);
   });