Angular项目适配可变数值ID根属性的动态接口定义与数据访问问题

因为返回对象的根键是动态变化的数值ID，TypeScript中可以使用索引签名来适配这类动态键结构，接口定义如下：

// 先确保你已经定义了Game接口，这里直接用你原有的Game类型即可
export interface VideoGameDetails {
  // 索引签名：键为字符串类型（JS对象的数字键会自动转为字符串存储），值为固定的{data: Game}结构
  [gameId: string]: {
    data: Game;
  }
}

你之前直接用results.id、results.data无法取值的原因是，返回结果的根键不是固定的id或data，而是你请求时传入的游戏ID，有两种可靠的取值方式：

方式1：使用请求时的gameId作为键取值（最稳妥） #

因为你调用fetchSelectedGame时已经明确知道要查询的游戏ID，直接用该ID作为键访问即可：

this.gameService.fetchSelectedGame(gameId)
  .subscribe((results: VideoGameDetails) => {
    // 数字类型的ID需要转成字符串，和对象存储的键类型匹配
    const targetKey = gameId.toString();
    this.game = results[targetKey].data;
  });

方式2：取对象首个属性值（通用适配） #

如果返回结果固定只会包含1个游戏的数据，也可以直接提取对象的第一个值，不需要依赖传入的gameId：

this.gameService.fetchSelectedGame(gameId)
  .subscribe((results: VideoGameDetails) => {
    const gameInfo = Object.values(results)[0];
    this.game = gameInfo.data;
  });

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