首页 > 解决方案 > 具有许多可能的数字选项的根对象的动态角度接口

问题描述

我正在尝试为我的 Angular 项目绘制一个界面,用户可以在其中使用 RapidAPI 中的 whattoplay api 搜索视频游戏。当您搜索视频游戏详细信息时,结果会返回一个由其数字 ID 标识的游戏。该 ID 可以是 25、105、3000 或许多其他可能的数字……

我目前的界面...

export interface VideoGameDetails {
    gameID: {
        data: Game;
    }
}

所有结果都为我提供了包含游戏数据的对象,但游戏 ID 发生了变化。我不确定如何使该根对象动态化并准备好在订阅和接收此类数据的其他组件中使用。

更新 关于使用以下建议的接口,我将如何使用订阅返回此类数据的方法来访问数据。

订阅了通过游戏 ID 获取数据的方法的组件...

this.gameService.fetchSelectedGame(gameId)
      .subscribe((results) => {
        this.game = results;
      });

因此,基于我必须使用的那个界面,我收到的结果示例是......

1468 {
   data: Game;
}

我将如何使用该结果参数深入研究数据对象?我似乎无法使用 results.id 或 results.data 之类的东西。再次感谢你的帮助。

标签: angulartypescriptinterface

解决方案


尝试这个:

export interface VideoGameDetails {
    [id: number]: {
        data: Game;
    }
}

更新

警告:我没有编译或运行,甚至没有语法检查所以......你已经被警告了:) 用法示例:

for (let k in results) {
    const result = results[k];
    console.log(result.data.someGameField);
}

推荐阅读