title: Getting error while iterating through a list of items and display it on page in Ionic 3, Firebase and Angular
body: <p>I am getting following error while iterating through a list of items and displaying it on page in Ionic 3, Firebase and Angular.</p>
  
  <p>The connection to the DB is working fine as I am able to add todo items into the DB successfully. The listing of items on the page is the problem.</p>
  
  <p><strong>Error:</strong></p>
  
  <pre><code>core.js:1449 ERROR Error: Uncaught (in promise): Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
  Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
      at NgForOf.ngOnChanges (VM2398 vendor.js:46674)
      at checkAndUpdateDirectiveInline (VM2398 vendor.js:13092)
      at checkAndUpdateNodeInline (VM2398 vendor.js:14620)
      at checkAndUpdateNode (VM2398 vendor.js:14563)
      at debugCheckAndUpdateNode (VM2398 vendor.js:15456)
      at debugCheckDirectivesFn (VM2398 vendor.js:15397)
      at Object.eval [as updateDirectives] (VM2489 ListPage.ngfactory.js:72)
      at Object.debugUpdateDirectives [as updateDirectives] (VM2398 vendor.js:15382)
      at checkAndUpdateView (VM2398 vendor.js:14529)
      at callViewAction (VM2398 vendor.js:14880)
      at NgForOf.ngOnChanges (VM2398 vendor.js:46674)
      at checkAndUpdateDirectiveInline (VM2398 vendor.js:13092)
      at checkAndUpdateNodeInline (VM2398 vendor.js:14620)
      at checkAndUpdateNode (VM2398 vendor.js:14563)
      at debugCheckAndUpdateNode (VM2398 vendor.js:15456)
      at debugCheckDirectivesFn (VM2398 vendor.js:15397)
      at Object.eval [as updateDirectives] (VM2489 ListPage.ngfactory.js:72)
      at Object.debugUpdateDirectives [as updateDirectives] (VM2398 vendor.js:15382)
      at checkAndUpdateView (VM2398 vendor.js:14529)
      at callViewAction (VM2398 vendor.js:14880)
      at c (VM2394 polyfills.js:3)
      at Object.reject (VM2394 polyfills.js:3)
      at NavControllerBase._fireError (VM2398 vendor.js:53687)
      at NavControllerBase._failed (VM2398 vendor.js:53680)
      at VM2398 vendor.js:53727
      at t.invoke (VM2394 polyfills.js:3)
      at Object.onInvoke (VM2398 vendor.js:5445)
      at t.invoke (VM2394 polyfills.js:3)
      at r.run (VM2394 polyfills.js:3)
      at VM2394 polyfills.js:3
  </code></pre>
  
  <p>Angular Firestore DB:</p>
  
  <p><a href="https://i.stack.imgur.com/q4ZA8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/q4ZA8.png" alt="enter image description here"></a></p>
  
  <p><strong>list.ts</strong></p>
  
  <pre><code>@Component({
    selector: 'page-list',
    templateUrl: 'list.html'
  })
  export class ListPage {
  
    todoItems: AngularFireList&lt;string[]&gt;;
  
    constructor(public navCtrl: NavController, public navParams: NavParams, private firebaseDB: AngularFireDatabase) {
      //read all the data from DB
      this.todoItems = this.firebaseDB.list("/todo-items");
      console.log(this.todoItems);
    }
  
  }
  </code></pre>
  
  <p><strong>list.html</strong></p>
  
  <pre><code>&lt;ion-header&gt;
    &lt;ion-navbar&gt;
      &lt;ion-title&gt;List&lt;/ion-title&gt;
    &lt;/ion-navbar&gt;
  &lt;/ion-header&gt;
  
  &lt;ion-content&gt;
    &lt;ion-list&gt;
      &lt;button ion-item *ngFor="let todoItem of todoItems"&gt;
        {{todoItem}}
      &lt;/button&gt;
    &lt;/ion-list&gt;
  &lt;/ion-content&gt;
  </code></pre>
  
  <p><strong>package.json</strong></p>
  
  <pre><code>{
    "name": "todo-app",
    "version": "0.0.1",
    "author": "Ionic Framework",
    "homepage": "http://ionicframework.com/",
    "private": true,
    "scripts": {
      "start": "ionic-app-scripts serve",
      "clean": "ionic-app-scripts clean",
      "build": "ionic-app-scripts build",
      "lint": "ionic-app-scripts lint"
    },
    "dependencies": {
      "@angular/animations": "5.2.11",
      "@angular/common": "5.2.11",
      "@angular/compiler": "5.2.11",
      "@angular/compiler-cli": "5.2.11",
      "@angular/core": "5.2.11",
      "@angular/forms": "5.2.11",
      "@angular/http": "5.2.11",
      "@angular/platform-browser": "5.2.11",
      "@angular/platform-browser-dynamic": "5.2.11",
      "@ionic-native/core": "~4.15.0",
      "@ionic-native/splash-screen": "~4.15.0",
      "@ionic-native/status-bar": "~4.15.0",
      "@ionic/storage": "2.2.0",
      "angularfire2": "^5.1.0",
      "firebase": "^5.5.8",
      "ionic-angular": "3.9.2",
      "ionicons": "3.0.0",
      "rxjs": "5.5.11",
      "sw-toolbox": "3.6.0",
      "zone.js": "0.8.26"
    },
    "devDependencies": {
      "@ionic/app-scripts": "3.2.0",
      "@ionic/lab": "1.0.13",
      "typescript": "~2.6.2"
    },
    "description": "An Ionic project"
  }
  </code></pre>