错误：NgFor仅支持绑定到诸如Arrays之类的Iterables

Question

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

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

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>

Answer 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() - 这可能是一个问题，具体取决于其实现。