web-dev-qa-db-ja.com

タイプ 'Observable <>'には、タイプ 'Observable <>'の次のプロパティがありません：[以下を参照]（エラーTS2322）

Ionic4を傾けて、Angular=大学プロジェクト（ToDoListモバイルアプリ）の場合です。AngularFirestore.collection[...]。valueChangesを使用して、Firestoreデータベースからデータを取得しようとしています。 （）そしてそれを後でコンポーネントに提供するためにカスタムサービスのメンバー変数に格納しますが、Visual Studio Codeとionicコンソールの両方でTS2322エラーが発生します。

エラーは次のとおりです。

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

私はこれらの2つのチュートリアルに従いました：- https://angularfirebase.com/lessons/firestore-advanced-usage-angularfire/ - https://www.techiediaries.com/ionic- firestore-crud / 関連するすべてのコードをコンポーネントに移動しようとしました https://github.com/angular/angularfire2/blob/master/docsに触発されたAngularFirestore.collection行を変更しました/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がシーケンスに含まれることを期待していますが、実際にはコンパイルできず、なぜこのエラーが発生するのかわかりません...

angulartypescriptionic-frameworkangularfire2ionic4
3
Kyron

編集：解決策が見つかると思います。プロジェクトでrxjsインポートと競合しました。トラブルシューティング中。コンパイラが、2つの異なるバージョン（および異なるディレクトリ）の2つのrxjsオブジェクトを比較しようとしていることがわかりました。

rxjsとrxjs-compatをホームディレクトリからアンインストールして使用し、プロジェクトフォルダーにあるもののみを使用しました。

JB Nizetが言ったように、rxjs/Rxを回避するために、私は次の2つのインポートのみを使用しました。

  • 'rxjs';から{監視可能}をインポート
  • インポート'rxjs/add/observable/of';

（どういうわけかそれをよりよくする方法があるかどうか教えてください）

4
Kyron