Anzeigen von JSON-Daten in einer Vorlage

Question

Ich habe mich gefragt, ob mir jemand helfen könnte, meine Daten anzuzeigen.

Ich habe einen benutzerdefinierten Anbieter, der meine API aufruft, die alle perfekt funktioniert.

Die Seite im mit arbeitet ‚spielen‘ und meine playing.ts Datei sieht wie folgt aus

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

} 

das Konsolenprotokoll zeigt die folgende:

Meine playing.html Datei sieht aus wie die folgende

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

der Fehler im bekommen ist wie folgt:

Ein anderes unterstützendes Objekt '[Objekt Objekt]' vom Typ 'Objekt' kann nicht gefunden werden. NgFor unterstützt nur die Bindung an Iterables wie Arrays

Im ein wenig verwirrt, im mit ionischen 2 beta arbeiten 11

Jede Hilfe wäre sehr geschätzt.

Frieden!

Answer 1

ich die Antwort herausgefunden Incase jemand in der gleichen Ausgabe läuft.

In meinem Provider, wenn ich ein neues Versprechen erstellen und ausführen mein http bekommen, ich hatte die folgende Zeile

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

Ich brauchte die zurückgegebene Array-Namen in der res.json() hinzufügen, meine so fix war das bearbeiten der Zeile wie folgt:

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

ich hoffe das kann jemand helfen.

Frieden!

Answer 2

Die Fehlermeldung ist ziemlich einfach. NgFor funktioniert nur für Arrays (oder array-ähnliche iterables). Sie können damit kein Objekt iterieren.
Was Sie iterieren wollen, ist das sports Array in Ihrem data Objekt, so dass die Lösung ist einfach:

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