如何从 Angular 的集合中正确检索 FireStore 对象数组？

Question

在我的应用程序中，到目前为止，我从一个模拟对象数组（其中每个对象代表我的表的一行）中检索必须显示到表中的数据。

最初我只是在我的组件 TypeScript 代码中添加了类似的内容：

orders: any[];

然后进入我完成的 ngOnInit() 方法：

this.ordersService.getAllOrders().then(orders => {
    this.orders = orders;
    console.log("RETRIEVED ORDERS: ", orders);
    this.loading = false;
});

我的服务的 getAllOrders() 方法只是从 JSON 文件中检索数据（数组）：

  getAllOrders() {
    return this.http.get<any>('assets/json_mock/ordini.json', {responseType: 'json'})
        .toPromise()
        .then(res => res.data)
        .then(data => { return data; });
  }

效果很好。

现在我正在尝试从 FireStore 数据库中检索此对象数组，但遇到了一些问题。

我是这样做的。

现在进入我的组件类的 ngOnInit()：

   this.ordersService.getAllOrders().subscribe(ordersList => {
     console.log("RETRIEVED ordersList: ", ordersList);
     this.orders = ordersList;
     console.log("RETRIEVED ORDERS: ", this.orders);
     this.loading = false;
   });

然后进入服务类 getAllOrders() 以这种方式更改：

getAllOrders(): Observable<any[]> {
    this.ordersList = this.db.collection('Orders').snapshotChanges();

    return this.ordersList;
}

它部分有效，因为它似乎从 FireStore 检索某些东西（连接工作正常），我认为也是我的“查询”。

问题是在我的组件的 subscribe() 方法中，这些行：

this.ordersService.getAllOrders().subscribe(ordersList => {
    console.log("RETRIEVED ordersList: ", ordersList);
    this.orders = ordersList;
    console.log("RETRIEVED ORDERS: ", this.orders);
    this.loading = false;
 });

它在 Chrome 控制台中打印：

所以我认为我必须以某种方式从这个对象中提取我的数组。我错过了什么？我该怎么做？

Answer 1

Firestore 不存储 JSON。它存储具有强类型值的键/值对，正如官方documentation 中提到的那样：

“使用 Map 或 Dictionary 对象来表示您的文档通常不是很方便，因此 Cloud Firestore 支持使用自定义类编写文档。Cloud Firestore 将对象转换为支持的数据类型。”

因此，没有直接的方法可以直接将结果作为json对象获取。

有一个名为 AngularFirestoreCollection 的服务是原生 Firestore SDK 的包装器，在本文档中，您可以找到有关如何从 Firestore 获取数据的有用示例，例如：

import { Component } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/firestore';
import { Observable } from 'rxjs';

export interface Item { name: string; }

@Component({
  selector: 'app-root',
  template: `
    <ul>
      <li *ngFor="let item of items | async">
        {{ item.name }}
      </li>
    </ul>
  `
})
export class AppComponent {
  private itemsCollection: AngularFirestoreCollection<Item>;
  items: Observable<Item[]>;
  constructor(private afs: AngularFirestore) {
    this.itemsCollection = afs.collection<Item>('items');
    this.items = this.itemsCollection.valueChanges();
  }
  addItem(item: Item) {
    this.itemsCollection.add(item);
  }
}

另一方面，如果你想直接使用 QuerySnapshot 类，看看这个thread。