Question

我正在尝试使用以下命令从我的服务类中的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>

但我一直收到错误

错误：无法找到'object'类型的不同支持对象'[object Object]'。 NgFor仅支持绑定到Iterables，例如Arrays。

我试过看类似的问题，但无济于事。请帮忙。

Answer 1

请检查您的JSON。 https://myfirstfirebaseproject-6da6c.firebaseio.com/products.json 它返回一个Object而不是一个Array。这就是为什么你不能在ngFor中使用返回的数据。

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

在你的component.ts中：

var globalVar = globalVar || {};
globalVar.object1 = {};
globalVar.object1.object2 = { a: "hello" }
(function(x){
    x.hello = 'its me';
}(globalVar.object1.object2));

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

离子2：找不到'对象'类型的不同支持对象'[object Object]'。 NgFor仅支持绑定到诸如Arrays之类的Iterables

1 个答案: