我在 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);    });  }