Ionic 2：找不到類型爲'object'的不同支持對象'[object Object]'。 NgFor如陣列

Question

我想用我的服務類來檢索火力數據只支持綁定到Iterables：

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

我輸出到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>  

，但我不斷收到錯誤

錯誤：無法找到類型爲'object'的不同支持對象'[object Object]'。 NgFor僅支持綁定到陣列等陣元。

我試着看類似的問題，但無濟於事。請幫忙。

Answer 1

請檢查您的JSON。 https://myfirstfirebaseproject-6da6c.firebaseio.com/products.json 它返回一個對象而不是數組。這就是爲什麼你不能在ngFor中使用返回的數據。

{ 
    -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" 
    } 
} 

試試這個：

<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> 

在你component.ts：

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

和（）相應地修改onItemClick。