API数据无法正常显示（离子/角度）

Question

我调用API并将响应数据分配给games[]数组，如下所示：

export class HomePage {
  games = [];
  genre: any;
  genreName: string = 'Upcoming Games';
  favorites = [];

  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    private _data: DataProvider,
    private storage: Storage,
    public loading: LoadingController,
  ) {}
  ngOnInit() {
    let loader = this.loading.create({
      content: 'Loading Games..',
    });

    loader.present().then(() => {
      this.storage.get('genre').then(val => {
        if (val) {
          // console.log('Val is equal to ', val) testing purposes
          this.genre = val;
          this.genreName = 'Shooter';
        } else {
          this.genre = 5;
          this.genreName = 'Shooter';
          this.storage.set('genre', this.genre);
        }

        this._data.getGames(this.genre, 0).subscribe(res => (this.games = res));
      });

      this.storage.get('favorites').then(val => {
        if (!val) {
          this.storage.set('favorites', this.favorites);
        } else {
          this.favorites = val;
        }
      });
      setTimeout(() => {
        loader.dismiss();
      }, 1200);
    });
  }
}

在home.html中，我可以使用以下表达式在网页上成功显示数据：

{{ games[1] | json }} 或 {{ games | json }}

但是我无法像这样显示json响应中的特定对象：

{{ games[1].id | json }} 或 {{ games.id | json }} 或 {{ games[1].id }} 或 {{ games.id }}。

有了这些，我收到了这个错误：

  

“无法读取未定义的属性'id'。

为什么这不起作用？