错误：NgFor仅支持绑定到诸如数组之类的Iterables [英] ERROR: NgFor only supports binding to Iterables such as Arrays

问题描述

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

I am simply displaying name from object which i stored in userlist using ngfor .

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

ERROR is : browser_adapter.js:84 ORIGINAL EXCEPTION: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as 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>

推荐答案

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

The snapshot's val function returns an object, not an array.

相反，你可以为 userlist ，您可以在其上推送快照的子项：

Instead, you could assign an empty array to userlist, onto which you could push the snapshot's children:

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

另外，在上调用而不是一旦，如果数据发生变化，将调用您的回调。这意味着可以多次调用 loader.dismiss（） - 这可能是一个问题，具体取决于它的实现。

Also, in calling on rather than once, your callback will be invoked if the data changes. Which means loader.dismiss() could be called multiple times - which could potentially be a problem, depending upon its implementation.

这篇关于错误：NgFor仅支持绑定到诸如数组之类的Iterables的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！