Angular 5/Firebase 5中AngularFireList.snapshotChanges()报错求助

嘿，我看了你的错误日志和代码，发现几个关键问题，咱们一步步来修复：

1. 先修正低级的方法名不匹配问题 #

你的服务里定义的是getCustomers()方法，但控制器里却调用了this.firebase.getServiceProviders()——这明显是手滑写错了，先把这个改过来：

// 控制器里修正调用语句
const x = this.firebase.getCustomers();

2. 排查AngularFire与Angular/Firebase的版本兼容性 #

Angular 5对应的AngularFire版本得是AngularFire2 5.x（也就是@angular/fire 5.x），而Firebase 5.x是适配这个版本的。如果你的依赖版本不对，就会出现这种Object(...) is not a function的错误，因为高版本AngularFire用了RxJS 6的语法，而Angular 5默认搭配的是RxJS 5。

调整依赖版本 #

打开你的package.json，确保依赖是下面这样的：

{
  "dependencies": {
    "@angular/common": "^5.2.0",
    "@angular/fire": "^5.4.2", // 这个版本完美适配Angular 5和Firebase 5
    "firebase": "^5.12.0",
    "rxjs": "^5.5.12", // Angular 5必须用RxJS 5.x
    "zone.js": "^0.8.29"
  }
}

改完后执行npm install重新安装依赖。

3. 修正服务中的AngularFireDatabase注入与调用 #

你的服务里写的this.fire.list('users')是错的，应该先注入AngularFireDatabase实例，再调用它的list方法：

import { Injectable } from '@angular/core';
import { AngularFireDatabase, AngularFireList } from '@angular/fire/database';

@Injectable({
  providedIn: 'root'
})
export class FirebaseService {
  customers: AngularFireList<any>;

  // 正确注入AngularFireDatabase
  constructor(private db: AngularFireDatabase) { }

  getCustomers(){
    this.customers = this.db.list('users'); // 用db.list替代错误的this.fire.list
    return this.customers;
  }
}

4. 规范控制器的代码写法 #

控制器里的代码有两个问题：一是不能在构造函数里直接写业务逻辑（应该用ngOnInit生命周期钩子），二是语法不符合TypeScript规范，修正后的代码如下：

import { Component, OnInit } from '@angular/core';
import { FirebaseService } from './path-to-your-firebase-service';
import { ServiceProvider } from './path-to-your-service-provider-model';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
  // 初始化空数组，避免undefined问题
  serviceProviders: ServiceProvider[] = [];

  constructor(private firebase: FirebaseService) { }

  ngOnInit() {
    const customersList = this.firebase.getCustomers();
    customersList.snapshotChanges().subscribe(items => {
      // 用map简化遍历逻辑，更简洁
      this.serviceProviders = items.map(item => {
        const customerData = item.payload.toJSON();
        customerData["$key"] = item.key;
        return customerData as ServiceProvider;
      });
    });
  }
}

按照上面的步骤逐一修正，应该就能解决这个错误了。

内容的提问来源于stack exchange，提问作者Lakshan Thilakarathne