Почему я получаю ошибку с интерфейсами и наблюдаемыми?

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

My 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[]>; и как я могу видеть это нормально для моего интерфейса

В сервисе я жестко закодировал данные, и все отлично работает, а мои закодированные данные по типам равны данным из базы данных.

Как в официальной документации:

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 ();"method.

Действия, возвращаемые snapshotChanges, имеют тип DocumentChangeAction и содержат тип и полезную нагрузку.Тип либо добавляется, либо изменяется, либо удаляется, а полезная нагрузка содержит идентификатор, метаданные и данные документа.

Другими словами, вам необходимо отобразить полученные данные примерно так:

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

Для получения дополнительной информации см. Следующие ссылки: ссылка1 , ссылка2

обновление

В вашем "задании"-service.service.ts "

изменить эту строку:

ToDo: Observable<ToDoIdInterface[]>;

на эту:

ToDo: Observable<any>;

и изменить это:

map(a => {

к этому:

map ((a: any) => {

После этого проект должен быть правильно собран.