如何用*ngFor遍历接口数组形式的JSON？解决TS7015类型错误

问题根源 #

你的API返回的是包含player数组的对象，但组件中错误地将players声明为IPlayer[]（纯数组类型），导致后续用Object.keys遍历数组时，字符串类型的索引与数组期望的数字索引不匹配，触发TS7015类型错误。

解决方案 #

根据你的需求，分两种场景处理：

场景1：只需要遍历玩家数组（最常用） #

直接从API返回的对象中提取player数组，让players保持IPlayer[]类型，简化HTML遍历逻辑：

1. 新增响应数据接口（可选，但更规范）

export interface IPlayerResponse {
  player: IPlayer[];
}

2. 修改组件代码

export class PlayerComponent {
  constructor(private playerApiService: PlayerApiService) {}

  ngOnInit(): void {
    this.getPlayers();
  }

  players: IPlayer[] = [];
  
  getPlayers(): void {
    this.playerApiService.getPlayers().subscribe((response: IPlayerResponse) => {
      // 直接提取对象中的player数组
      this.players = response.player;
    });
  }
}

3. 简化HTML模板
   直接遍历players数组即可，无需嵌套Object.keys：

<div *ngFor="let player of players">
  {{player.name}}
  {{player.isAttending}}
</div>

场景2：需要保留原对象结构（如API返回多个键值对） #

如果API返回的对象包含多个类似player的数组键，需要保留原结构，则修改players的类型为键值对对象，明确值的类型为IPlayer[]：

1. 修改组件类型定义

export class PlayerComponent {
  constructor(private playerApiService: PlayerApiService) {}

  ngOnInit(): void {
    this.getPlayers();
  }

  objectKeys = Object.keys;  

  // 定义为字符串键对应IPlayer数组的对象
  players: { [key: string]: IPlayer[] } = {};
  
  getPlayers(): void {
    this.playerApiService.getPlayers().subscribe(players => {
      this.players = players;
    });
  }
}

2. 原HTML模板可正常使用
   此时TS会识别players[key]的类型为IPlayer[]，不会再触发类型错误：

<div *ngFor="let key of objectKeys(players)">
    Key: {{key}}

    <div *ngFor="let player of players[key]">
        {{player.name}}
        {{player.isAttending}}
    </div>
</div>

错误原因补充 #

当你将players声明为IPlayer[]时，它是一个数组，Object.keys(players)返回的是字符串类型的索引（如"0"、"1"），但数组的索引要求是数字类型，TS因此判定players[key]的类型不明确，抛出TS7015错误。而{ [key: string]: any }类型跳过了类型检查，所以不会报错，但丢失了TypeScript的类型安全优势。

内容的提问来源于stack exchange，提问作者Tomo