javascript - 在 Ionic 3、Firebase 和 Angular 中迭代项目列表并将其显示在页面上时出现错误

Question

我在 Ionic 3、Firebase 和 Angular 中迭代项目列表并将其显示在页面上时遇到以下错误。

与数据库的连接工作正常，因为我能够成功地将待办事项添加到数据库中。页面上的项目列表是问题所在。

错误:

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 数据库:

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

这是 Angular 和 firebase 最常见的问题之一，因为该错误表明您正在尝试将 ngFor 与对象而不是数组绑定(bind)。 ngFor 作用于数组。您可以使用 [] 进行转换

this.todoItems = [this.todoItems];