时间戳

首页 > 解决方案 > 如何使 Firestore 查询与 get() 和 valueChanges() 一起使用？

firebase - 如何使 Firestore 查询与 get() 和 valueChanges() 一起使用？

问题描述

我正在使用 Angular 8 并有一个表单，用户可以在其中选择他想要查询数据库的内容，然后单击两个按钮中的一个 - 一个用于在网站上实时查看数据，另一个用于下载数据。

我想我可以利用一个函数进行查询，然后根据用户单击的按钮调用不同的函数，get()用于下载和valueChanges()实时数据视图。但是当我尝试这个时，我在浏览器控制台中收到以下错误。（这是queryas 类型any- 如果我将类型指定为 AngularFirestoreCollection，我会收到关于我get()在 VSCode 中的类型的错误）

错误错误：“未捕获（承诺）：TypeError：this.query.get不是函数

我可以补充一点，我以前有两个完全独立的（工作）功能，用于实时下载和查看。对于下载，我使用了以下查询。我认为这实际上是一个 Firestore 查询，而我在更新的代码中尝试使用的“查询”是一个 AngularFirestoreCollection。但是有没有一种方法可以使某种查询/集合同时适用于get()和valueChanges()？

旧（工作）查询：

var query = this.afs.collection(collection).ref.where('module', 'in', array_part);

尝试通用函数 makeQuery()：

  onSubmit(value, buttonType): void {
    if (buttonType=='realtime') {
      this.getRealTimeData(value);
    }
    if (buttonType=='download') {
      this.downloadCsv(value);
    }
  }

  async downloadCsv(value) {
    this.query = this.makeQuery(value);
    this.dataForDownload = await this.getDataForDownload();
    this.dataForDownload = JSON.stringify(this.dataForDownload['data']);
    console.log('Data: ', this.dataForDownload);
    var date = new Date();
    var date_str = this.datePipe.transform(date, 'yyyy-MM-ddTHH-mm');
    this.makeFileService.downloadFile(this.dataForDownload, 'OPdata-' + date_str);
  }

  getDataForDownload() {
    return this.query.get()
      .then(function (querySnapshot) {
        var jsonStr = '{"data":[]}';
        var dataObj = JSON.parse(jsonStr); //making object we can push to
        querySnapshot.forEach(function (doc) {
          JSON.stringify(doc.data()), ', id: ', doc.id);
          dataObj['data'].push(doc.data());
        });
        return dataObj;
      })
      .catch(function (error) {
        console.log("Error getting documents: ", error);
      });
  }

  async getRealTimeData(value) {
    this.query = await this.makeQuery(value);
    this.data = this.query.valueChanges();
  }

  async makeQuery(value) {
    var collection: string;
    return this.query = this.afs.collection<DataItem>('CollectionName', ref => ref.where('datetime', '>=', '2020-01-15T09:51:00.000Z').orderBy('datetime', 'desc').limit(100));
  }

标签： firebasegoogle-cloud-firestoreangularfire2querying

解决方案

这valueChanges()是 angularfire 中用于从 firestore 检索数据的方法，而该get()方法用于从 firestore 检索但使用 vanilla javascript。

正如您在代码中看到的那样，混合使用这两种方法将返回错误。因此，既然 angularfire 是在 javascript firebase 代码之上创建的，那么您应该可以使用valueChanges()它在网站上实时查看数据，并下载数据。

推荐阅读