Getting error while iterating through a list of items and display it on page in Ionic 3, Firebase and Angular

Question

I am getting following error while iterating through a list of items and displaying it on page in Ionic 3, Firebase and Angular.

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.

Error:

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

Angular Firestore DB:

list.ts

@Component({
  selector: 'page-list',
  templateUrl: 'list.html'
})
export class ListPage {

  todoItems: AngularFireList<string[]>;

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

}

list.html

<ion-header>
  <ion-navbar>
    <ion-title>List</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-list>
    <button ion-item *ngFor="let todoItem of todoItems">
      {{todoItem}}
    </button>
  </ion-list>
</ion-content>

package.json

{
  "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"
}

Answer 1

You are trying to iterate an object using ngFor instead Convert the object keys in to an string array

    @Component({
      selector: 'page-list',
      templateUrl: 'list.html'
    })
    export class ListPage {

      todoItems: string[];

      constructor(public navCtrl: NavController, public navParams: NavParams, private firebaseDB: AngularFireDatabase) {
        //read all the data from DB
        var items = this.firebaseDB.list("/todo-items");
         //converts to an string[]
         this.todoItems = Object.keys(items).map((key) => {
             return items[key]
        });
    }  
   }

Answer 2

This is one of the most repeated issue with Angular and firebase, as the error says you are trying to bind ngFor with an Object instead of Arrray. ngFor works over an array. You could convert it by using []

this.todoItems = [this.todoItems];