如何使用firestore在Ionic 3中进行查询并在列表中显示数据？

Question

我是离子3中的新手，我正在阅读页面中的firestore文档：https://firebase.google.com/docs/firestore/query-data/queries?hl=es-419，我正在尝试进行查询，但我不能，我不太了解，请求某人帮助知道如何在firebase中进行查询。

在代码中，我收到了一个页面的电子邮件，我想用这封电子邮件分隔数据，只是通过我收到的电子邮件显示集合的子字段

this is the page where i was making the query:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { AngularFirestore, AngularFirestoreCollection } from 'angularfire2/firestore';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import { AngularFirestoreDocument } from 'angularfire2/firestore';


export interface Rutina {
  id: String;
  dia: String;
  ejercicio: String;
  series: String;
  repeticiones:String;
  email:String;
}

export class RutinaejercicioPage {

  email;
  dia;
  db;
  private itemCollection: AngularFirestoreCollection<Rutina>;
  items: Observable<Rutina[]>;

  private itemsCollection2: AngularFirestoreCollection<Rutina>;
  items2: Observable<Rutina[]>

  private itemsCollection3: AngularFirestoreCollection<Rutina>;
  items3: Observable<Rutina[]>

  private itemsCollection4: AngularFirestoreCollection<Rutina>;
  items4: Observable<Rutina[]>

  private itemsCollection5: AngularFirestoreCollection<Rutina>;
  items5: Observable<Rutina[]>

  private itemsCollection6: AngularFirestoreCollection<Rutina>;
  items6: Observable<Rutina[]>

  constructor(public navCtrl: NavController, public navParams: NavParams,db: AngularFirestore) {
    this.email = this.navParams.get('email');
    console.log(this.email);

    if(this.dia == 'lunes'){
    this.itemCollection = this.db.collection("items").where("email", "==", this.email)
    .get()
    .then(function(querySnapshot) {
        querySnapshot.forEach(function(doc) {
            // doc.data() is never undefined for query doc snapshots
            return doc.data();
        });
    })
    .catch(function(error) {
        console.log("Error getting documents: ", error);
    });

    }
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad RutinaejercicioPage');
  }



}

this is the html where i want to show the list:
<ion-header>

  <ion-navbar>
    <ion-title>rutinaejercicio</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>

  <ion-list inset>
    <button ion-item *ngFor="let item of items | async">
      {{item.}}
    </button>
  </ion-list>

</ion-content>

此图片显示我的数据库：

Answer 1

Firestore查询以获取所有项目的列表。例如，下面是一种方法，可以调用该方法从firestore中获取有关集合引用的项目列表。

@Injectable()
export class ItemsServiceProvider {

db: any;
collection: string = 'items';

constructor() {
  this.db = firebase.firestore();
}


getAllItemsByUserId(userId) {
return new Promise((resolve, reject) => {
  this.db.collection(this.collection)
    .where('uid', '==', userId)
    .get()
    .then((querySnapshot) => {
      let arr = [];
      querySnapshot.forEach(function(doc) {
        var obj = JSON.parse(JSON.stringify(doc.data()));
        obj.id = doc.id;
        //obj.eventId = doc.id;
        arr.push(obj);
      });

      if (arr.length > 0) {
        resolve(arr);
      } else {
        console.log("No such document!");
        resolve(null);
      }
    })
    .catch((error: any) => {
      reject(error);
    });
   });
  }
 }

}

可以从任何类中调用它

this.itemsServiceProvider.getAllItemsByUserId(this.userId).then((e) => {
  this.listItems = e;
});

然后在html中，可以使用ngFor将其列出，如下所示：

<div *ngFor="let item of listItems;let i = 'index'" style="padding-top: 20px;">
   <label class="control-label" >{{item.name}}</label>
   .
   .
   .
</div>

就是这样。如果您对Firestore查询有任何疑问，可以从here

开始