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

Question

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

最初我只是在我的组件 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 数据库中检索这个对象数组，但我遇到了一些问题。

我这样做过

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

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

然后进入服务class将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。它存储 key/value 对强类型值，正如官方 documentation:

中提到的那样

“使用 Map 或 Dictionary 对象来表示您的文档通常不是很方便，因此 Cloud Firestore 支持使用自定义 classes 编写文档。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 class，请查看此。

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

How can I correctly retrieve the array of FireStore objects from a collection in Angular?

firebase

angularfire2

angular

google-cloud-firestore