title: Ionic 3 and Firebase - NgFor only supports binding to Iterables such as Arrays
body: <p>I'm building an application in Ionic that will iterate through a for-loop and display data from my Firebase database. But my code gives the following error when I attempt to <code>ionic serve</code> and view the page:</p>
  
  <pre><code>RROR Error: Cannot find a differ supporting object '[object Object]'
  of type 'User Name'. NgFor only supports binding to Iterables such as 
  Arrays.
  </code></pre>
  
  <p>Since I'm a beginner with Firebase, Ionic, and Angular, I'm not sure where or how I need to create an array to hold my data (if that's what is being implied in my error -- I'm not totally sure). I was wondering if I could get some help from someone more familiar with Ionic and Angular.</p>
  
  <p>My relevant code:</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { IonicPage, NavController, NavParams } from 'ionic-angular';
  import { AngularFireModule } from "angularfire2";
  import { AngularFireDatabase } from 'angularfire2/database';
  import { Observable } from 'rxjs-compat';
  import * as firebase from 'firebase';
  
  /**
   * Generated class for the MemberListPage page.
   *
   * See https://ionicframework.com/docs/components/#navigation for more info on
   * Ionic pages and navigation.
   */
  
  @IonicPage()
  @Component({
    selector: 'page-member-list',
    templateUrl: 'member-list.html',
  })
  export class MemberListPage {
  
    users;
  
    constructor(public navCtrl: NavController, public navParams: NavParams, public afd: AngularFireDatabase) {
      this.getDataFromFirebase();
    }
  
    getDataFromFirebase(){
      var ref = firebase.database().ref('/profile/user001/');
        ref.on('value', profileSnapshot =&gt; {
          this.users = profileSnapshot.val();
          console.log(profileSnapshot.val());
        })
    }
  
    ionViewDidLoad() {
      console.log('ionViewDidLoad MemberListPage');
    }
  
  
  }
  </code></pre>
  
  <p>And my HTML:</p>
  
  <pre><code>&lt;ion-header&gt;
  
    &lt;ion-navbar&gt;
      &lt;ion-title&gt;Member List&lt;/ion-title&gt;
    &lt;/ion-navbar&gt;
  
  &lt;/ion-header&gt;
  
  
  &lt;ion-content padding class="bg"&gt;
    &lt;p&gt;This page will pull information about members from a database
       that has not yet been implemented.&lt;/p&gt;
    &lt;p&gt;Below is an example profile for a member: &lt;/p&gt;
    &lt;ion-card *ngFor="let user of users"&gt;
        &lt;ion-card-header&gt;
          &lt;strong&gt;Name&lt;/strong&gt;: {{user.name}}
          &lt;br&gt;&lt;br&gt;
          &lt;strong&gt;Position&lt;/strong&gt;: {{user.position}}
          &lt;br&gt;&lt;br&gt;
          &lt;strong&gt;E-mail&lt;/strong&gt;: {{user.email}}
          &lt;br&gt;&lt;br&gt;
          &lt;strong&gt;Member Since&lt;/strong&gt;: {{user.joinDate}}
          &lt;br&gt;&lt;br&gt;
          &lt;strong&gt;Social Media&lt;/strong&gt;:
          &lt;br&gt;&lt;br&gt;
          &lt;button ion-button icon-start (click)="goFacebook()"&gt;
            &lt;ion-icon name="logo-facebook"&gt;&lt;/ion-icon&gt;
          &lt;/button&gt;
          &lt;button ion-button icon-start (click)="goInstagram()"&gt;
            &lt;ion-icon name="logo-instagram"&gt;&lt;/ion-icon&gt;
          &lt;/button&gt;
  
        &lt;/ion-card-header&gt;
  
      &lt;/ion-card&gt;
  
  &lt;/ion-content&gt;
  </code></pre>