Json 离子2：找不到不同的支持对象'；[对象对象]'；类型为'；对象'；。NgFor只支持绑定到数组之类的可重用文件

我正在尝试使用以下方法从我的服务类中的firebase检索数据：

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>    

{{product.date | date}}
{{product.title}}

{{product.content}

但我一直在犯错误

错误：找不到类型为“object”的不同支持对象“[object]”。NgFor只支持绑定到数组之类的可重用文件

我试图研究类似的问题，但没有结果。请帮助。

请检查您的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>

并相应地修改您的onItemClick（）。

请检查您的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>

---

并相应地修改您的onItemClick（）。

更有可能的是，您从API调用的

数据中得到的不是数组，而是对象。使用
console.log（data）
查看它的外观，然后进行任何需要的更改。嗨，Richard，我有一个对象。我是否应该自己手动将对象转换为数组？对象中是否有数组？如果有，就用它。如果没有，请以某种方式转换它，或者不要在模板中迭代。更有可能的是，您从API调用中获得的
数据中得到的不是数组，而是对象。使用
console.log（data）
查看它的外观，然后进行任何需要的更改。嗨，Richard，我有一个对象。我是否应该自己手动将对象转换为数组？对象中是否有数组？如果有，就用它。如果没有，请以某种方式转换它，或者不要在模板中迭代。Wannadream，我在使用“let key of products.keys（）”时遇到了一些问题，因为键是一个未定义的属性。我很惊讶它不起作用。我举个例子。给我一点时间。对不起，用法不对。它应该是Object.keys（products）。若直接表达式不能在ngFor中工作，则需要将其使用到组件类中的另一个属性中。我将发布一个示例。Wannadream，我在“let key of products.keys（）”方面遇到了一些问题，因为keys是一个未定义的属性。我很惊讶它不起作用。我举个例子。给我一点时间。对不起，用法不对。它应该是Object.keys（products）。若直接表达式不能在ngFor中工作，则需要将其使用到组件类中的另一个属性中。我将发布一个例子。