错误：NgFor 仅支持绑定到 Iterables，例如 Arrays答案

【问题标题】：ERROR: NgFor only supports binding to Iterables such as Arrays错误：NgFor 仅支持绑定到 Iterables，例如 Arrays
【发布时间】：2017-02-07 06:29:00
【问题描述】：

我只是使用 ngfor 显示我存储在 userlist 中的对象的名称 .

错误是： browser_adapter.js:84 原始异常：找不到“object”类型的不同支持对象“[object Object]”。 NgFor 只支持绑定到 Arrays 等 Iterables。

user-list.ts

import { Component } from '@angular/core';
import { NavController,Popover,ViewController,PopoverController } from 'ionic-angular';
import { NavParams } from 'ionic-angular';
declare var firebase;

@Component({
  templateUrl: 'build/pages/firebase/user-list/user-list.html'
})
export class UserListPage {

  userlist:any;
  users:any;
  _db:any;
  constructor(private popoverCtrl: PopoverController,private navCtrl: NavController,public loadingCtrl: LoadingController) {
    let loader = this.loadingCtrl.create({
      content: "Please wait..."
    });
    loader.present();
     this._db = firebase.database().ref('/');
       this._db.on('value', (dataSnapshot)=> {
         console.log(dataSnapshot.val());
         this.userlist=dataSnapshot.val();
         loader.dismiss();
       });
  }
}

user-list.html

<ion-content>
  <ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>
  <ion-list>
    {{userlist | json }}
    <ion-item *ngFor="let user of userlist" >
      {{user.name}}
    </ion-item>
  </ion-list>
</ion-content>

【问题讨论】：

必须是数组。如果您只有一个用户，则无需使用 ngFor。你不能迭代任何对象。

标签： angular ionic2

【解决方案1】：

快照的val 函数返回一个对象，而不是一个数组。

相反，您可以将一个空数组分配给userlist，您可以将快照的子代推送到该数组上：

this._db = firebase.database().ref('/');
this._db.on('value', (dataSnapshot)=> {
  this.userlist = [];
  dataSnapshot.forEach((childSnapshot) => {
    this.userlist.push(childSnapshot.val());
  });
  loader.dismiss();
});

此外，在调用on 而不是once 时，如果数据发生更改，将调用您的回调。这意味着 loader.dismiss() 可能会被多次调用 - 这可能是一个问题，具体取决于其实现。

【讨论】：