Angular6/Firebase2 |错误类型错误：this.clientService.getClients(...).subscribe 不是函数

Question

我在从 Firebase 获取数据（在本例中为用户列表）时遇到了一些问题。

版本信息

Angular 版本 6

Firebase 4.13.1

Angualrfire2 5.0.0-rc.7.2

浏览器中出现错误

DashboardComponent.html:1 错误类型错误： this.clientService.getClients(...).subscribe 不是函数 在 ClientsComponent.push../src/app/components/clients/clients.component.ts.ClientsComponent.ngOnInit (clients.component.ts:19) 在 checkAndUpdateDirectiveInline (core.js:8939) 在 checkAndUpdateNodeInline (core.js:10203) 在 checkAndUpdateNode (core.js:10165) 在 debugCheckAndUpdateNode (core.js:10798) 在 debugCheckDirectivesFn (core.js:10758) 在 Object.eval [作为 updateDirectives] (DashboardComponent.html:1) 在 Object.debugUpdateDirectives [as updateDirectives] (core.js:10750) 在 checkAndUpdateView (core.js:10147) 在 callViewAction (core.js:10388)

这是我的 client.service.ts

import { Injectable } from '@angular/core';
import { AngularFireDatabase, FirebaseListObservable, FirebaseObjectObservable } from 'angularfire2/database-deprecated';
import { Observable, of } from 'rxjs';
import { Client } from '../models/Client';

@Injectable({providedIn:'root'})
export class ClientService {

  clients: FirebaseListObservable <any[]>;
  client: FirebaseObjectObservable <any>;

  constructor(public af:AngularFireDatabase) { 
    this.clients = this.af.list('/clients') as FirebaseListObservable<Client[]>;
  }

  getClients():FirebaseListObservable <any[]> {
    return this.clients;
  }

}

这是我的 clients.component.ts

import { Component, OnInit } from '@angular/core';
import { ClientService } from '../../services/client.service';
import { Client } from '../../models/Client';

@Component({
  selector: 'app-clients',
  templateUrl: './clients.component.html',
  styleUrls: ['./clients.component.css']
})
export class ClientsComponent implements OnInit {

  clients:Client[];

  constructor(public clientService:ClientService) {

   }

  ngOnInit() {
    this.clientService.getClients().subscribe( clients => {
      this.clients = clients;
      console.log(this.clients);
    });
  }

}

这是我的客户端界面

export interface Client {

    $key?:string;
    firstName?:string;
    lastName?:string;
    email?:string;
    phone?:string;
    balance?:number;

}

我已经尝试了几乎所有现有解决方案来解决这个错误和/或让 firebase2 与 Angular 6 一起工作，但我似乎无法解决这个问题。

感谢任何帮助，谢谢！

Answer 1

它是 AngularFireObject 不是 FirebaseObjectObservable 和 AngularFireList 不是 FirebaseListObservable

查看更多详情：https://github.com/angular/angularfire2/blob/master/docs/version-5-upgrade.md

https://github.com/angular/angularfire2/blob/master/docs/rtdb/objects.md

import { AngularFireObject, AngularFireList } from 'angularfire2/database';

@Injectable({providedIn:'root'})
export class ClientService {

  clients: Observable<any[]>;
  clientRef:AngularFireObject<any>;


  constructor(public af:AngularFireDatabase) {
    this.clientRef = db.object('item');
    this.clients = this.af.list('/clients').valueChanges();
  }

  getClients():FirebaseListObservable <any[]> {
    return this.clients;
  }

}

Answer 2

这是因为this.af.list('/clients') 返回的对象类型不是bservable。这是AngularFireList 类型。要将其转换为可观察的，您需要使用 valueChanges() 或 snapshotChanges() 方法。因此，更新 ClientService 的构造函数代码应该可以工作：

  clients: Observable<any[]>;

  constructor(public af:AngularFireDatabase) { 
    this.clients = this.af.list('/clients').valueChanges();
  }