在模板中顯示JSON數據

Question

我想知道是否有人可以幫助我顯示我的數據。

我有一個自定義提供程序，可以調用我的API，它們都能正常工作。

我正在使用的頁面是“正在播放”，而我的playing.ts文件如下所示

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { PlayingService } from '../../providers/playing-service/playing-service';

@Component({
  templateUrl: 'build/pages/playing/playing.html',
})

export class PlayingPage {

    sports: any;

    constructor( private playing: PlayingService, private navCtrl: NavController ) {
        this.loadSports();
    }

    loadSports() {
        this.playing.getAllSports()
            .then(data => {
                this.sports = data;
                console.log(data);
            });
    }

}

控制台日志顯示以下內容：

我的playing.html文件如下所示

<ion-content padding class="playing-screen">
  <ion-list>
    <ion-item *ngFor="let sport of sports" >
       <h3>{{sport}}</h3>
     </ion-item>
   </ion-list>
</ion-content>

我得到的錯誤如下：

找不到類型為“對象”的其他支持對象“ [對象對象]”。 NgFor僅支持綁定到可迭代對象，例如數組

我有點困惑，我正在使用Ionic 2 beta 11

任何幫助將不勝感激。

和平！

Answer 1

錯誤消息很簡單。 NgFor僅適用於數組（或類似數組的可迭代對象）。 您不能使用它來迭代對象。
您想要迭代的是data對象內部的sports數組，因此解決方案很簡單：

loadSports() {
    this.playing.getAllSports()
        .then(data => {
            this.sports = data.sports || []; //for safety
        });
}

Answer 2

我想出了答案，以防有人遇到同樣的問題。

在我的提供程序中，當我創建一個新的Promise並運行我的http get時，我有以下一行

.map(res => res.json())

我需要將返回的數組名稱添加到res.json（）中，所以我的解決方法是按如下方式編輯該行：

.map(res => res.json().sports)

我希望這可以幫助某人。

和平！