Question

我倾向于将Ionic4和Angular用于大学项目（ToDoList移动应用程序）。我正在尝试使用AngularFirestore.collection [...]。valueChanges（）从我的Firestore数据库中获取一些数据，并将其存储在自定义服务的成员变量中，然后再将其提供给组件。但是我在Visual Studio Code和离子控制台中都遇到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/ 我尝试将所有相关代码移至组件，并根据https://github.com/angular/angularfire2/blob/master/docs/firestore/collections.md的启发更改AngularFirestore.collection行。我也尝试过删除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和rxjs-compat。正如JB Nizet所说，为了摆脱“ rxjs / Rx”，我只使用了以下两个导入： -从“ rxjs”导入{Observable}； -导入“ rxjs / add / observable / of”；

（告诉我是否有办法以某种方式做得更好）

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

1 个答案: