我想知道是否有人可以帮我显示我的数据。
我有一个自定义提供程序,它调用我的API,这一切都很完美。
我正在使用的页面是'播放'而我的play.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>
我得到的错误如下:
无法找到'object'类型的不同支持对象'[object Object]'。 NgFor仅支持绑定到Iterables,例如Arrays
我有点困惑,我正在使用Ionic 2 beta 11
非常感谢任何帮助。
和平!
答案 0 :(得分:2)
错误信息非常简单。 NgFor
仅适用于数组(或类似数组的迭代)。你不能用它迭代一个对象
您要迭代的是sports
对象中的data
数组,因此解决方案很简单:
loadSports() {
this.playing.getAllSports()
.then(data => {
this.sports = data.sports || []; //for safety
});
}
答案 1 :(得分:0)
我想出答案,任何人遇到同样的问题。
在我的提供商中,当我创建一个新的Promise并运行我的http get时,我有以下一行
.map(res => res.json())
我需要将返回的数组名称添加到res.json(),所以我的修复是按如下方式编辑该行:
.map(res => res.json().sports)
我希望这可以帮助别人。
和平!