首页 文章

在模板中显示json数据

提问于
浏览
1

我想知道是否有人可以帮助我显示我的数据 .

我有一个自定义提供程序,它调用我的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);
            });
    }

}

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

array description here
我的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]' . NgFor仅支持绑定到诸如Arrays之类的Iterables

我有点困惑,我正在使用Ionic 2 beta 11

任何帮助将不胜感激 .

和平!

2 回答

  • 0

    错误消息非常简单 . NgFor 仅适用于数组(或类似数组的迭代) . 您无法使用它迭代对象 .
    您要迭代的是 data 对象中的 sports 数组,因此解决方案很简单:

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

    我想出答案,任何人遇到同样的问题 .

    在我的提供商中,当我创建一个新的Promise并运行我的http get时,我有以下行

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

    我需要将返回的数组名称添加到res.json(),所以我的修复是编辑该行,如下所示:

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

    我希望这可以帮助别人 .

    和平!

相关问题