Angular调用Rawg API时游戏卡片无法显示，移除插值后正常

问题修复方案 #

你遇到的问题核心是数据赋值错误，其次存在属性绑定不规范的问题，按以下步骤修改即可正常渲染：

1. 修正接口返回字段取值
   Rawg API 返回的游戏列表数组存放在 results 字段，而非你代码中写的 data 字段，错误的取值导致games始终为空数组，*ngFor无内容可渲染。
   修改卡片组件TS文件的订阅逻辑：

ngOnInit(): void {
  this.rawgDataService.getGames().subscribe( 
    response => {this.games = response.results;},
    error => {console.error('游戏列表请求失败：', error)}
  )
}

新增的错误回调可以帮你在控制台排查请求失败的情况（比如key过期、跨域、网络异常等）。

2. 修正图片属性绑定语法
   Angular 中不推荐直接用插值语法填写原生属性值，应该用 Angular 内置的属性绑定语法，避免路径解析异常：
   修改卡片组件HTML中的图片标签：

<img [src]="game.background_image" class="card-img-top" alt="游戏封面" />

3. 检查基础依赖导入
   确认你项目的 app.module.ts 中已经导入并注册了 HttpClientModule，否则Http请求无法正常发出：

// app.module.ts 头部导入
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    // 其他现有导入项
    HttpClientModule
  ],
  // 其他配置项
})

4. 可选优化：增加加载状态
   可以添加加载提示优化用户体验，避免请求过程中页面空白：

<div class="row" *ngIf="games.length; else loading">
  <!-- 原有卡片循环代码 -->
</div>
<ng-template #loading>
  <p class="text-white">游戏列表加载中，请稍候...</p>
</ng-template>

修改完成后刷新页面即可正常渲染20张游戏卡片。

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