ERROR: NgFor only supports binding to Iterables such as Arrays

Question

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

错误是： browser_adapter.js:84 原始异常：无法找到 'object' 类型的不同支持对象“[object Object]”。 NgFor 仅支持绑定到 Iterables，例如数组。

用户-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();
       });
  }
}

用户-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 函数 returns 对象，而不是数组。

相反，您可以将一个空数组分配给 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() 可以被多次调用——这可能是一个问题，具体取决于它的实现。

ERROR: NgFor only supports binding to Iterables such as Arrays

ERROR: NgFor only supports binding to Iterables such as Arrays

ionic2

angular