Angularjs 在模板中显示json数据

我想知道是否有人能帮我显示我的数据

我有一个自定义的提供程序来调用我的API，这一切都很完美

我正在使用的页面是“playing”，我的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);
            });
    }

}

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

控制台日志显示以下内容：

我的playing.html文件如下所示

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);
            });
    }

}

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

{{sport}

我得到的错误如下：

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

找不到类型为“object”的不同支持对象“[object]”。NgFor只支持绑定到数组之类的可重用文件

我有点困惑，我在用离子2β11

任何帮助都将不胜感激

---

和平

错误信息非常直截了当

NgFor

仅适用于阵列（或类似阵列的iterables）。不能用它来迭代对象。
要迭代的是

数据

对象中的

运动

数组，因此解决方案很简单：

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

---

如果有人遇到同样的问题，我就找到了答案

在我的提供者中，当我创建一个新的承诺并运行我的HTTPGET时，我有以下几行代码

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

我需要将返回的数组名添加到res.json（）中，因此我的修复方法是按如下方式编辑该行：

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

我希望这能帮助别人

---

和平

我无法测试它，但看起来您的“any”需要更改为数组类型。看一看。类HeroListComponent有一个很好的示例。您可能需要创建一个名为sport的typescript对象，您可以将体育数据放入其中。或者您想要的任何其他属性。我得到以下错误属性“sports”在类型“{}”上不存在。这只是一个typescript错误。您可以忽略它，或者通过将

data

声明为类型

any

：

this.playing.getAllSports（）。然后（（data:any）=>{…