Ionic2 Ngfor unterstützt nur Array

Question

im versuchen, einige json über HTTP-Client zu laden, aber wenn es um die Sicht kommt bekomme ich immer diese Fehlermeldung:

NgFor only supports binding to Iterables such as Arrays 

Wenn ich am console.log Ausgang aussehen ich sehe, dass es ist ein Objekt mit anderen Objekten darin.

Das ist mein Service-Code:

@Injectable() 
export class DataService { 
    data: any; 

    constructor(private http: Http) { 
    this.data = null; 
    } 

    load() { 

     // We're using Angular Http provider to request the data, 
     // then on the response it'll map the JSON data to a parsed JS object. 
     // Next we process the data and resolve the promise with the new data. 
    return this.http.get('http://localhost:3000/db') //json url 
     .map(res => res); 
    } 
} 

mein page.ts Konstruktor Dann, wo die Daten geladen:

constructor(private nav:NavController, navParams:NavParams, http:Http, public service:DataService) { 
     this.service.load().subscribe (
      response => { 
       this.displayData=response; 
       console.log(this.displayData); 
      }, 
      error => console.log ('error in download') 
     ); 
} 

Mein seite.html ngfor:

<ion-card *ngFor="let data of displayData"> 
</ion-card> 

Und endlich mein json von der localhost url:

{ 
    "0": { 
    "title": "Erreichbarkeit", 
    "items": [ 
     { 
     "name": "1", 
     "value": "a" 
     }, 
     { 
     "name": "2", 
     "value": "b" 
     }, 
     { 
     "name": "3", 
     "value": "c" 
     } 
    ] 
    }, 
    "1": { 
    "title": "Erreichbarkeit 2", 
    "items": [ 
     { 
     "name": "1", 
     "value": "g" 
     }, 
     { 
     "name": "2", 
     "value": "f" 
     }, 
     { 
     "name": "3", 
     "value": "e" 
     } 
    ] 
    } 
} 

Hoffe jemand weiß, was falsch ist, weil dies mich verrückt macht.

Answer 1

Ihre Json sollten [{"title" : ...}, {"title": ...}] sein, weil gerade jetzt, es ist nicht ein Array sondern eine Objekt mit zwei Eigenschaften genannt und . Haben Sie versuchen, mit der Json wie folgt zu ändern:

[ 
    { 
    "title": "Erreichbarkeit", 
    "items": [ 
     { 
     "name": "1", 
     "value": "a" 
     }, 
     { 
     "name": "2", 
     "value": "b" 
     }, 
     { 
     "name": "3", 
     "value": "c" 
     } 
    ] 
    }, 
    { 
    "title": "Erreichbarkeit 2", 
    "items": [ 
     { 
     "name": "1", 
     "value": "g" 
     }, 
     { 
     "name": "2", 
     "value": "f" 
     }, 
     { 
     "name": "3", 
     "value": "e" 
     } 
    ] 
    } 
] 

Und jetzt in der Ansicht:

<ion-card *ngFor="let data of displayData"> 

    <ion-card-header>{{data.title}}</ion-card-header> 

    <ion-card-content > 
     <p *ngFor="let item of data.items">{{item.name}} : {{item.value}}</p> 
    </ion-card-content> 

</ion-card>