为什么我得到接口和 Observable 的错误？

Question

我构建了 ToDoApp 并将 firebase 连接到我的项目，但出现错误。

ERROR in src/app/todo-component/todo-component.component.ts(25,7): error TS2740: Type 'DocumentChangeAction<{}>[]' is missing the following properties from type 'Observable<ToDoInterface[]>': _isScalar, source, operator, lift, and 5 more.

这是我的 ToDOInterface：

export interface  ToDoInterface {
  id?: string;
  title?: string;
  completed?: boolean;
}

我的待办事项：

import { Injectable } from '@angular/core';
import {ToDoInterface} from './ToDoInterface'
import {AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument} from "@angular/fire/firestore";
import {Observable} from "rxjs";

@Injectable({
  providedIn: 'root'
})
export class ToDoService {
  public toDoArray:ToDoInterface[] = [
    {
      id: "sdfsdf",
      title: 'Todo one',
      completed: false
    },
    {
      id: "13dsfsdf",
      title: 'Todo two',
      completed: false
    },
    {
      id: "safsdf",
      title: 'Todo third',
      completed: false
    }
  ];
  ToDoCollection: AngularFirestoreCollection<ToDoInterface>;
  ToDo: Observable<ToDoInterface[]>;
  ToDoCollectionName: string = "ToDo";
  constructor(private firestore: AngularFirestore) {

  }
  getToDos(){
    return this.toDoArray;
  }
  getToDosFirebase(){
    return this.firestore.collection(this.ToDoCollectionName).snapshotChanges();
  }
  changeToDos(index,property,value){
    this.toDoArray[index][property] = value;
  }
  deleteToDos(index){
    this.toDoArray.splice(index,1);
  }
  deleteToDosFirebase(index){
    // this.firestore.collection("ToDO").doc(index).delete();
  }
  addToDos(obj: ToDoInterface){
    this.toDoArray.push(obj);
  }
  addToDosFirebase(obj: ToDoInterface){
    return new Promise<any>(((resolve, reject) => {
      this.firestore
        .collection("ToDo")
        .add(obj)
        .then(res => console.log('data send!'), err => reject(err))
    }))
  }
}

还有我在 ngOnInit 中调用的函数

getToDo(){
    this._toDoService.getToDosFirebase().subscribe(items => {
      this.toDosFirebase = items;
      console.log(items);
    });

也许我对 rxjs 不太了解，但如果 toDosFirebase: Observable<any[]>; 和我如何才能看到它对我的界面正常

在服务中，我对数据进行硬编码，一切正常，我的硬编码数据按类型等于来自 firebase 的数据。

喜欢官方文档：

private ToDoCollection: AngularFirestoreCollection<ToDoInterface>;
  ToDo: Observable<ToDoIdInterface[]>;
  ToDoCollectionName: string = "ToDo";
  constructor(private readonly firestore: AngularFirestore) {
    this.ToDoCollection = firestore.collection<ToDoInterface>(this.ToDoCollectionName);
    this.ToDo = this.ToDoCollection.snapshotChanges().pipe(
      map(a => {
        const data = a.payload.doc.data() as ToDoInterface; //ERROR
        const id = a.payload.doc.id;
        return {id, ...data}
        }
      ));
    console.log(this.ToDo);
  }

Answer 1

在您的“getToDosFirebase”方法中，您调用的是“.snapshotChanges();”方法。

snapshotChanges 返回的操作属于 DocumentChangeAction 类型 并包含一个类型和一个有效负载。类型要么添加，要么修改 或删除，并且有效负载包含文档的 id、元数据和 数据。

换句话说，您需要像这样映射接收到的数据：

.snapshotChanges()
.map(actions => {
   return actions.map(a => {

     //Get document data
     const data = a.payload.doc.data() as Task;

     //Get document id
     const id = a.payload.doc.id;

     //Use spread operator to add the id to the document data
     return { id, …data };
   });
});

有关更多信息，请参阅以下链接：link1、link2

更新

在你的“to-do-service.service.ts”中

改变这一行：

ToDo: Observable<ToDoIdInterface[]>;

到这里：

ToDo: Observable<any>;

也改变这个：

map(a => {

到这里：

map((a: any) => {

在此之后项目应该正确构建。