イオン2： 'オブジェクト'タイプのサポートオブジェクト '[オブジェクトオブジェクト]'が見つかりません。唯一、このような私が使用して私のサービスクラスにfirebaseからデータを取得しようとしています

Question

配列として反復可能オブジェクトへのバインディングをサポートNgFor：

return this.http.get('https://myfirstfirebaseproject-6da6c.firebaseio.com/products.json') 
    .map(res => res.json()); 

home.tsで、私は、使用して、それを購読する：

 this.productService.fetchProducts() 
      .subscribe(data => { 
       console.log(data) 
       this.products = data; 
      }); 

I出力は、使用してhome.htmlします

<ion-card ion-item *ngFor="let product of products; let i = index" (click)="onItemClick(product)"> 
    <ion-card-header> 
     {{ product.date | date }} 
    </ion-card-header> 
    <ion-card-content> 
     <ion-card-title> 
     {{ product.title }} 
     </ion-card-title> 
     <p> 
     {{ product.content }} 
     </p> 
    </ion-card-content> 
    </ion-card>  

が、私はエラー

を得続けます

エラー： 'オブジェクト'タイプのサポートオブジェクト '[オブジェクトオブジェクト]'が見つかりません。 NgForは、配列などのIterablesへのバインドのみをサポートしています。

私は同様の問題を見てみましたが、役に立たなかった。助けてください。

Answer 1

JSONを確認してください。 https://myfirstfirebaseproject-6da6c.firebaseio.com/products.json 配列ではなくオブジェクトを返します。そのため、返されたデータはngForで使用できません。あなたのcomponent.tsで

<ion-card ion-item *ngFor="let key of keys; let i = index" (click)="onItemClick(key)"> 
    <ion-card-header> 
     {{ products[key].date | date }} 
    </ion-card-header> 
    <ion-card-content> 
     <ion-card-title> 
     {{ products[key].title }} 
     </ion-card-title> 
     <p> 
     {{ products[key].content }} 
     </p> 
    </ion-card-content> 
    </ion-card> 

を：：

keys: string[]; 
... 
this.productService.fetchProducts() 
      .subscribe(data => { 
       console.log(data) 
       this.products = data; 
       this.keys = Object.keys(this.products); 
      }); 

をと（）に応じて、あなたのonItemClickを変更

{ 
    -KiTWPuI_TYt0b_Qi03Y: { 
    amount: 0, 
    category: "Baby", 
    content: "I love cricket", 
    date: "2017-03-01", 
    title: "Cricket" 
    }, 
    -Kid7fghtlxkyrOChQPk: { 
    amount: "111", 
    category: "Book", 
    content: "updated content", 
    date: "2017-04-01", 
    title: "Cycling" 
    }, 
    d9e7545c-90a3-4a57-97ab-ea3bf9171023: { 
    amount: "12", 
    category: "Baby", 
    content: "COnten1", 
    date: "2017-01-01", 
    title: "Title2" 
    } 
} 

これを試してみてください。