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

我的ToDoService：

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）=> {

此后，项目应正确构建。

为什么我在Interfaces和Observable上出错？

1 个答案: