CODEWITHSUNDEEP
angularionic2
Anand Parmar
Anand Parmar

Reputation: 168

ERROR: NgFor only supports binding to Iterables such as Arrays

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

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.

enter image description here

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>

Upvotes: 1

Views: 3169

Answers (1)

cartant
cartant

Reputation: 58400

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

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

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.

Upvotes: 3

Related Questions