Angular 5 Firebase-错误TypeError：（中间值）.map不是函数

Question

我是angular的新手，我一直在关注youtube上的TODO教程，因此能够将数据插入到firebasDB中，但无法检索插入的数据。我不确定，但是我认为这可能与该错误消息有关。有谁知道是什么问题 ？

Error message

app.module.ts

    import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';

import { AppComponent } from './app.component';
import { environment } from'../environments/environment';
import { ThToDoComponent } from './th-to-do/th-to-do.component';
import {ThingsToDoServiceService} from './th-to-do/shared/things-to-do-service.service';

@NgModule({
  declarations: [
    AppComponent,
    ThToDoComponent
  ],
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireDatabaseModule
  ],
  providers: [ThingsToDoServiceService],
  bootstrap: [AppComponent]
})
export class AppModule { }

component.ts

import { Component, OnInit } from '@angular/core';
import {ThingsToDoServiceService} from './shared/things-to-do-service.service';

@Component({
  selector: 'app-th-to-do',
  templateUrl: './th-to-do.component.html',
  styleUrls: ['./th-to-do.component.css'],
  providers : [ThingsToDoServiceService]
})
export class ThToDoComponent implements OnInit {
  toDoListArray: any[];

    constructor(private thingsToDoService : ThingsToDoServiceService) { }

  ngOnInit() {
    this.thingsToDoService.getToDoList().snapshotChanges()
    .subscribe(item => {
      this.toDoListArray = [];
      item.forEach(element => {
        var x = element.payload.toJSON();
        x["$key"] = element.key;
        this.toDoListArray.push(x);
      })

      //sort array isChecked false  -> true
        this.toDoListArray.sort((a,b) => {
          return a.isChecked - b.isChecked;
        })
    });
  }

  onAdd(itemTitle) {
    this.thingsToDoService.addTitle(itemTitle.value);
    itemTitle.value = null;
  }

  alterCheck($key: string,isChecked) {
    this.thingsToDoService.checkOrUnCheckTitle($key,!isChecked);
  }

  onDelete($key : string){
    this.thingsToDoService.removeTitle($key);
  }

}

服务

import { Injectable } from '@angular/core';
import {AngularFireDatabase, AngularFireList} from 'angularfire2/database';
 // deal with firebade db interactions

 @Injectable({
  providedIn: 'root'
})

export class ThingsToDoServiceService {
  toDoList: AngularFireList<any>;
  constructor(private firebasedb: AngularFireDatabase) { }

  getToDoList() {
    this.toDoList = this.firebasedb.list('titles');
    return this.toDoList;
  }

  addTitle(title: string) {
    this.toDoList.push({
      title: title,
      isChecked: false
    });
  }

  checkOrUnCheckTitle($key: string, flag: boolean) {
    this.toDoList.update($key, { isChecked: flag });
  }

  removeTitle($key: string) {
    this.toDoList.remove($key);
  }

}

component.html

<div class="jumbotron" style="padding:45px 0px">
  <h4 class="text-center">Things to do app</h4>
</div>

<div class="input-group">
  <input type="text" class="form-control" #itemTitle>
  <div class="input-group-addon hover-cursor" (click)="onAdd(itemTitle)">
    <i class="fa fa-plus-circle fa-2x"></i>
  </div>
</div>

<div class="collection">
  <ul class="list-group">
    <li class="list-group-item" *ngFor="let item of toDoListArray">
      <span class="hover-cursor" [class.text-success]="item.isChecked" (click)="alterCheck(item.$key,item.isChecked)">
        <i class="fa fa-lg" [ngClass]="item.isChecked? 'fa-check-circle-o':'fa-circle-thin'"></i>
      </span>
      {{item.title}}
      <span class="hover-cursor text-danger pull-right" (click)="onDelete(item.$key)">
        <i class="fa fa-trash-o fa-lg"></i>
      </span>
    </li>
  </ul>
</div>

Answer 1

1.change在package.json下面   “ angularfire2”：“ ^ 5.1.1”，     “ firebase”：“ ^ 5.0.2”，

2.npm安装

3。在node_modules/@angular/fire/firebase.app.module.d.ts的firebase.app.module.d.ts中
在FirebaseApp中添加automaticDataCollectionEnabled：boolean，如下所示：

导出声明类FirebaseApp实现app.App {

name: string;
automaticDataCollectionEnabled:boolean
options: {};

}