Блог

Я использую Ionic4 и Angular для университетского проекта (мобильное приложение ToDoList). Я пытаюсь получить некоторые данные из моей базы данных firestore с помощью AngularFirestore.collection[…].valueChanges() и сохранить их в переменной-члене моего пользовательского сервиса, чтобы впоследствии передать их компоненту. Но я получаю ошибку TS2322 как в коде Visual Studio, так и в консоли ionic.

Ошибка заключается в следующем :

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"
}
  

Я ожидаю, что последовательность будет содержать наблюдаемое, извлеченное из базы данных, и на самом деле я не могу скомпилировать, и я не знаю, почему я получаю эту ошибку…

Редактировать: я думаю, что я мог бы найти решение. У меня был конфликт с rxjs импортом в моем проекте. Во время устранения неполадок. Я обнаружил, что компилятор пытался сравнить два rxjs объекта из двух разных версий (и в разных каталогах).

Я удалил rxjs и rxjs-compat из своего домашнего каталога, чтобы использовать только те, которые находятся в папке проекта.

Чтобы избежать проблем rxjs/Rx , как сказал JB Nizet, я использовал только два следующих импорта :

• импортируйте { Observable } из ‘rxjs’;
• импортируйте ‘rxjs/add/observable/of’;

(Скажите мне, есть ли способ сделать это как-то лучше)