如何从 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/employees/shared/employee.service.ts(16,50) 中的错误：错误 TS2339：“Observable”类型上不存在属性“then”。

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() 的文档。如果您需要 doc id，您可以将 snapshotChanges() 与 RxJS 可管道运算符（例如 map()）结合使用（以创建包含 id 和数据的对象数组）：

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 };
       });
    )
  */
}

组件：

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

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

希望对您有所帮助！