Получение ошибки при повторении через список элементов и отображение его на странице в Ionic 3, Firebase и Angular

Я получаю следующую ошибку, повторяя список элементов и отображая их на странице в Ionic 3, Firebase и Angular.

Соединение с БД работает нормально, так как я могу успешно добавлять объекты todo в БД. Проблема со списком элементов на странице.

Ошибка:

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

Угловая 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"
}

Всего 2 ответа


Это одна из самых повторяющихся проблем с угловыми и firebase, так как ошибка говорит, что вы пытаетесь привязать ngFor к объекту вместо Arrray. ngFor работает над массивом. Вы можете преобразовать его, используя []

this.todoItems = [this.todoItems];

Вы пытаетесь выполнить итерацию объекта, используя ngFor, вместо этого преобразуйте ключи объекта в массив строк

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

Есть идеи?

10000