类型'AngularFireObject<{}>‘不能赋值给类型'FirebaseObjectObservable<User>’

Question

这个错误给我带来了很大的麻烦。我正在使用Angular4和angularfire2创建一个注册模块。

这是package.json代码。

"dependencies": {
"@angular/animations": "^4.2.4",
"@angular/cdk": "^5.1.0",
"@angular/common": "^4.2.4",
"@angular/compiler": "^4.2.4",
"@angular/core": "^4.2.4",
"@angular/flex-layout": "^2.0.0-beta.12",
"@angular/forms": "^4.2.4",
"@angular/http": "^4.2.4",
"@angular/material": "^2.0.0-beta.2",
"@angular/platform-browser": "^4.2.4",
"@angular/platform-browser-dynamic": "^4.2.4",
"@angular/router": "^4.2.4",
"@angular/service-worker": "^5.2.1",
"@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.3",
"angular-sortablejs": "^2.5.1",
"angular2-useful-swiper": "^5.0.1",
"angularfire2": "^5.0.0-rc.6",
"bootstrap": "^4.0.0-beta",
"core-js": "^2.4.1",
"firebase": "^4.9.0",
"hammerjs": "^2.0.8",
"jquery": "^3.2.1",
"lodash": "^4.17.4",
"metismenu": "^2.7.0",
"ng2-dnd": "^4.0.0",
"ngx-agile-slider": "^1.0.0-alpha.8",
"ngx-slideshow": "0.0.11",
"npmignore": "^0.2.0",
"pace-js": "^1.0.2",
"perfect-scrollbar": "^0.8.1",
"popper.js": "^1.12.5",
"rxjs": "^5.4.2",
"sortablejs": "^1.7.0",
"swiper": "^4.1.0",
"ts-helpers": "^1.1.2",
"zone.js": "^0.8.16"
  },
  "devDependencies": {
    "@angular/cli": "^1.6.6",
    "@angular/compiler-cli": "^4.2.4",
    "@angular/language-service": "^4.2.4",
    "@types/hammerjs": "^2.0.35",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/jquery": "^2.0.48",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.1.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.3.2",
    "typescript": "^2.3.4",
    "typings": "^2.1.1"
  }

下面是firebase数据库操作的服务代码。

import { Injectable } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';
import { FirebaseListObservable, FirebaseObjectObservable } from 'angularfire2/database-deprecated';

import { User } from '../model/user';

@Injectable()
export class UserService {

  private dbPath: string = '/users';

  user: FirebaseObjectObservable<User> = null;
  users: FirebaseListObservable<User[]> = null;

  constructor(private db: AngularFireDatabase) {  }

  getUser(key: string): FirebaseObjectObservable<User> {
    this.user = this.db.object(`${this.dbPath}/${key}`);
    return this.user;
  }

  createUser(user: User): void {
    this.users.push(User).catch(error => this.handleError(error));
  }

  updateUser(key: string, value: any): void {
    this.users.update(key, value).catch(error => this.handleError(error));
  }

  deleteUser(key: string): void {
    this.users.remove(key).catch(error => this.handleError(error));
  }

  getUsersList(query = {}): FirebaseListObservable<User[]> {
    this.users = this.db.list(this.dbPath);
    return this.users;
  }

  deleteAll(): void {
    this.users.remove().catch(error => this.handleError(error));
  }

  private handleError(error) {
    console.log(error);
  }
}

正如您从package.json文件中看到的，我使用的是angular/cli v1.6.6。我认为这是因为angularfire2和angular4版本的原因。

Answer 1

变化

从…

import { FirebaseListObservable, FirebaseObjectObservable } from 'angularfire2/database-deprecated';

至

import { AngularFireDatabase, FirebaseListObservable, FirebaseObjectObservable } from 'angularfire2/database';

编辑

它应该是

import { AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument} from 'angularfire2/firestore';

然后

@Injectable()
export class UserService {
  usersCollection: AngularFirestoreCollection<Users>
  Users: Observable<Users[]>;

  constructor(public afs: AngularFirestore) { 
    this.Users = this.afs.collection('Users').valueChanges();
  }

  getUsers(){
    return this.Users;
     }

}

Answer 2

有另一种方法可以解决这个问题，方法是：

  private user$ :FirebaseObjectObservable<User>;

使用

  private user$ :AngularFireObject<User>;

Answer 3

使用Angular 11

变化

import { FirebaseListObservable, FirebaseObjectObservable } from 'angularfire2/database-deprecated';

至

import { AngularFireList, AngularFireObject } from '@angular/fire/database';

同时更改的所有批注

• FirebaseObjectObservable<User> to AngularFireObject<user>
• and AngularFireList<User[]>

to FirebaseListObservable<User[]>

希望这能行得通