在模板中显示json数据

我想知道是否有人能帮我显示我的数据。在模板中显示json数据

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

的网页IM与被“打”我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>

错误即时得到如下：

找不到类型为'object'的不同支持对象'[object Object]'。 NgFor仅支持绑定到Iterables如阵列

林有些迷惑，即时通讯用离子2测试工作11

任何帮助，将不胜感激。

和平！

来源

2016-08-11 BigJobbies

我无法测试它，但它看起来像你的'任何'需要改变成一种数组。看看https://angular.io/docs/ts/latest/guide/server-communication.html。类HeroListComponent有一个很好的例子。您可能需要制作一个名为sport的打字稿对象，您可以在其中放入运动数据。 –

我认为您需要做{{sport.sportname}}。或任何其他你想要的财产。 –

我想出答案柜面任何人跑进了同样的问题。

在我的供应商，当我创建一个新的承诺和运行我的HTTP GET，我有以下行

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

我需要返回数组名称添加到res.json（），所以我的修复是编辑行如下：

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

我希望这可以帮助某人。

和平！

来源

2016-08-12 02:55:51 BigJobbies

错误消息非常简单。 NgFor只适用于数组（或类似数组的迭代器）。你不能用它迭代一个对象。
要重复你是什么data对象内部sports阵列，因此该解决方案很简单：

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

来源

2016-08-11 15:53:42 yarons

我收到以下错误类型'{}'上不存在属性'sports'。 – BigJobbies

这只是一个打字稿错误。你可以忽略它，或者通过声明'data'为'any'类型来让它消失：'this.playing.getAllSports（）。then（（data：any）=> {...' – yarons

在模板中显示json数据

回答

相关问题