Как я могу получить коллекцию из FireStore?

Question

Я пытаюсь получить всю коллекцию из Firestore и следую инструкциям шаг за шагом, но все время возникают ошибки, либо map (), либо Observable, либо then () не существует, либо не работает.

Вот как я пытался получить это:

import { Injectable } from '@angular/core';
import { Employee } from './employee';
import { AngularFirestore } from '@angular/fire/firestore';

@Injectable({
  providedIn: 'root'
})
export class EmployeeService {

  FormData: Employee;

  constructor(private firestore: AngularFirestore) { }

  getEmployees(){
    this.firestore.collection('employees').get().then((snapshot) => {
      snapshot.docs.forEach(doc => {
        console.log(doc);
      })
    })
  }
}

Вот что я получаю сейчас:

ОШИБКА в src / app / employee / shared / employee.service.ts (16,50): ошибка TS2339: свойство «then» не существует для типа «Observable».

Answer 1

Попробуйте вместо этого использовать valueChanges(). valueChanges() возвращает Observable данных в виде синхронизированного массива объектов JSON.

getEmployees(){
  this.firestore.collection('employees')
    .valueChanges()
    .subscribe(docs => {
      // loop through each item in the array and log value
      docs.forEach(doc => console.log(doc));
    });
}

Это происходит из документации для valueChanges () . В случае, если вам нужен идентификатор документа, вы можете вместо этого использовать snapshotChanges () в сочетании с конвейерными операторами RxJS, такими как map() (для создания массива объектов с идентификатором и данными):

getEmployees(){
  this.firestore.collection('employees')
    .snapshotChanges()
    .pipe(
       map(actions => actions.map(a => {
         const data = a.payload.doc.data();
         const id = a.payload.doc.id;
         return { id, ...data };
       });
    )
    .subscribe(docs => {
      // loop through each item in the array and log value
      docs.forEach(doc => console.log(doc.id));
    });
} 

В идеале вы должны создать class или interface для представления структуры данных каждого "сотрудника" и использовать ее для строгого ввода ответа:

Услуги:

interface Employee {
  someProperty: number;
  anotherProperty: string;
  yetAnotherProperty: boolean;
}

// ...

// perhaps return the observable so a component using this service can consume the data (can't return from inside subscribe())
getEmployees(): Observable<Employee[]> {
  return this.firestore.collection<Employee>('employees').valueChanges();

  /* or instead snapshotChanges() with map()
    return this.firestore.collection<Employee>('employees')
      .snapshotChanges()
      .pipe(
        map(actions => actions.map(a => {
          const data = a.payload.doc.data();
          const id = a.payload.doc.id;
          return { id, ...data };
       });
    )
  */
}

Компонент: * +1021 *

@Component({ /* ... */})
export class SomeComponent {
  constructor(private employeeService: EmployeeService) {}

  ngOnInit() {
    this.employeeService.getEmployees().subscribe(employees => console.log(employees));
  }
}

Надеюсь, это поможет!