Question

从Firebase获取数据（在这种情况下为用户列表）时遇到了一些麻烦。

版本信息

Angular版本6

Firebase 4.13.1

Angualrfire2 5.0.0-rc.7.2

在浏览器中看到的错误

DashboardComponent.html：1错误TypeError： 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 [作为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

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

  clients: Observable<any[]>;

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

Answer 2

不是 FirebaseObjectObservable 的 AngularFireObject 和不是 FirebaseListObservable 的 AngularFireList

请检查此以获取更多详细信息：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;
  }

}

Angular6 / Firebase2 |错误TypeError：this.clientService.getClients（...）。subscribe不是函数

2 个答案: