类型 'Observable<>' 缺少类型 'Observable<>' 的以下属性：[见下文]（错误 TS2322）

Question

我正在使用 Ionic4 和 Angular 进行大学项目（ToDoList 移动应用程序）。我正在尝试使用 AngularFirestore.collection[...].valueChanges() 从我的 firestore 数据库中获取一些数据，并将其存储在我的自定义服务的成员变量中，以便随后将其提供给组件。但是我在 Visual Studio 代码和离子控制台中都遇到了 TS2322 错误。

错误如下：

Type 'Observable<ToDoList[]>' is missing the following properties from type Observable<ToDoList[]>': buffer, bufferCount, bufferTime, bufferToggle, and 104 more.'

我已经学习了这两个教程： -https://angularfirebase.com/lessons/firestore-advanced-usage-angularfire/ -https://www.techiediaries.com/ionic-firestore-crud/ 我试图将所有相关代码移动到组件，更改我的 AngularFirestore.collection 行，灵感来自 https://github.com/angular/angularfire2/blob/master/docs/firestore/collections.md 我还尝试删除 AngularFireAuth 的导入，以及 this.afAuth.auth.signInAnonymously();

行

我的列表服务：

import { Injectable } from '@angular/core';
import {ToDoItem, ToDoList} from '../models/todo-model';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/Rx';
import { AngularFirestoreCollection, AngularFirestore } from '@angular/fire/firestore';
//import { AngularFireAuth } from '@angular/fire/auth';


@Injectable({
  providedIn: 'root'
})
export class TodoServiceService {
  lists: Observable<ToDoList[]>
  listsCollectionRef: AngularFirestoreCollection<ToDoList>

  constructor(/*public afAuth: AngularFireAuth, */public afs: AngularFirestore) {
    console.log('Hello TodoServiceProvider Provider');
    //this.afAuth.auth.signInAnonymously();
    this.listsCollectionRef = this.afs.collection<ToDoList>('ToDoLists');
    this.lists = this.listsCollectionRef.valueChanges();
  }

  public getLists(): Observable<ToDoList[]> {
    return this.lists;
  }

我的模型：

export interface ToDoList {
    uuid: string,
    name: string,
    items: ToDoItem[]
}

export interface ToDoItem {
    uuid?: string,
    name: string,
    desc?: string,
    complete: boolean
}

我的组件：

import { Component } from '@angular/core';
import { TodoServiceService } from '../services/todo-service.service';
import { ToDoList } from '../models/todo-model';
import { Observable } from 'rxjs/Observable';
import { Router } from '@angular/router';
import { AlertController } from '@ionic/angular';

@Component({
  selector: 'app-lists',
  templateUrl: 'lists.page.html',
  styleUrls: ['lists.page.scss']
})

export class ListsPage {
    sequence: Observable<ToDoList[]>;

    constructor(private service: TodoServiceService, 
                private router: Router,
                private alertController: AlertController) {
        this.sequence = this.service.getLists();
    }
}

我的package.json

{
  "name": "powerTasks",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^7.2.2",
    "@angular/core": "^7.2.2",
    "@angular/fire": "^5.1.2",
    "@angular/forms": "^7.2.2",
    "@angular/http": "^7.2.2",
    "@angular/platform-browser": "^7.2.2",
    "@angular/platform-browser-dynamic": "^7.2.2",
    "@angular/router": "^7.2.2",
    "@ionic-native/core": "^5.0.0",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ionic/angular": "^4.0.0",
    "angularfire2": "^5.1.2",
    "core-js": "^2.5.4",
    "firebase": "^5.9.1",
    "promise-polyfill": "^8.1.0",
    "rxjs": "~6.3.3",
    "zone.js": "~0.8.29"
  },
  "devDependencies": {
    "@angular-devkit/architect": "~0.12.3",
    "@angular-devkit/build-angular": "~0.12.3",
    "@angular-devkit/core": "~7.2.3",
    "@angular-devkit/schematics": "~7.2.3",
    "@angular/cli": "~7.2.3",
    "@angular/compiler": "~7.2.2",
    "@angular/compiler-cli": "~7.2.2",
    "@angular/language-service": "~7.2.2",
    "@ionic/angular-toolkit": "~1.3.0",
    "@ionic/lab": "1.0.20",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~10.12.0",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.1.4",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~8.0.0",
    "tslint": "~5.12.0",
    "typescript": "~3.1.6"
  },
  "description": "An Ionic project"
}

我希望序列包含从数据库中提取的 Observable，但实际上我无法编译，我不知道为什么会出现此错误...

Answer 1

编辑：我认为我可以找到解决方案。我在我的项目中与 rxjs 导入发生冲突。在故障排除过程中。我发现编译器试图比较来自两个不同版本（和不同目录）的两个 rxjs 对象。

我从我的主目录中卸载了 rxjs 和 rxjs-compat，然后只使用项目文件夹中的那些。

为了摆脱 rxjs/Rx，正如 JB Nizet 所说，我只使用了以下两个导入：

从 'rxjs';
导入'rxjs/add/observable/of';

（请告诉我是否有更好的方法）

类型 'Observable<>' 缺少类型 'Observable<>' 的以下属性：[见下文]（错误 TS2322）

Type 'Observable<>' is missing the following properties from type 'Observable<>': [see below] (error TS2322)

typescript

ionic-framework

angularfire2

angular

ionic4