输入“可观察的"缺少类型“Observable<>"中的以下属性:[见下文](错误 TS2322) [英] Type 'Observable<>' is missing the following properties from type 'Observable<>': [see below] (error TS2322)
问题描述
我正在为一个大学项目(ToDoList 移动应用程序)学习 Ionic4 和 Angular.我正在尝试使用 AngularFirestore.collection[...].valueChanges() 从我的 firestore 数据库中获取一些数据，并将其存储在我的自定义服务的成员变量中，以便之后将其提供给组件.但是我在 Visual Studio Code 和 ionic 控制台中都遇到了 TS2322 错误.
I'm leaning Ionic4 and Angular for an university project (A ToDoList mobile app). I'm trying to get some data from my firestore database with AngularFirestore.collection[...].valueChanges() and to store it in a member variable of my custom service to give it to the component afterwards. But i'm getting both an TS2322 error in Visual Studio Code and in the ionic console.
错误如下:
输入'Observable
我遵循了这两个教程:-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();
I have followed these two tutorials : -https://angularfirebase.com/lessons/firestore-advanced-usage-angularfire/ -https://www.techiediaries.com/ionic-firestore-crud/ I have tried to move all the related code to the component, change my AngularFirestore.collection line, inspired by https://github.com/angular/angularfire2/blob/master/docs/firestore/collections.md I have also tried removing the import of AngularFireAuth, and the line 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
My 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，但实际上我无法编译，我不知道为什么会出现此错误...
I expect sequence to contain the Observable extracted from the database and actually I cannot compile and I don't know why I am getting this error...
推荐答案
我想我可以找到解决方案.我在我的项目中与 rxjs 导入有冲突.在故障排除过程中.我发现编译器试图比较来自两个不同版本(以及不同目录中)的两个 rxjs 对象.
Edit : I think that I could find a solution.
I had a conflict with rxjs imports in my project.
During the troubleshooting. I found out that the compiler was trying to compare two rxjs objects from two different versions (and in different directories).
我从我的主目录中卸载了 rxjs 和 rxjs-compat 以仅使用项目文件夹中的那些.
I uninstalled the rxjs and rxjs-compat from my home directory to used then only the ones in the project folder.
为了摆脱 rxjs/Rx，正如 JB Nizet 所说，我只使用了以下两个导入:
To get away with rxjs/Rx, as JB Nizet said, I used only the two following imports :
- import { Observable } from 'rxjs';
- import 'rxjs/add/observable/of';
(告诉我是否有办法做得更好，不知何故)
(Tell me if there is a way to do it better, somehow)
这篇关于输入“可观察的"缺少类型“Observable<>"中的以下属性:[见下文](错误 TS2322)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
