在 ionic 应用程序中，我想将存储在 firebase firestore 中的数据显示到应用程序

Question

在 ionic 中，我想显示存储在 firestore 中的用户电子邮件和位置，但用户的 firestore 文档 ID 是他们的电子邮件地址。我如何获取他们的数据并显示给他们

在 authentication.ts 中

import { Injectable } from "@angular/core";
import { AngularFirestore } from '@angular/fire/firestore';
import * as firebase from 'firebase/app';

@Injectable()
export class AuthenticationService {

  constructor(private firestore: AngularFirestore){}

  registerUser(value){

     firebase.auth().createUserWithEmailAndPassword(value.email, value.password)

     this.firestore.doc(`users/${value.email}`).set({
      Email: value.email
    })
  }


  userDetails(){
    return firebase.auth().currentUser;
  }
}

在 display.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>
      User Welcome
    </ion-title>

  </ion-toolbar>
</ion-header>

<ion-content padding>

<div *ngFor="let item of info>
      <h1>{{ item.Email }}</h1> 
    </div>

  <ion-button (click)="logout()">Log Out</ion-button>
</ion-content>

在 display.page.ts 中，我已经给出了将电子邮件和位置添加到 firestore 的代码，现在我想显示我正在做的数据

display.page.ts

ngOnInit(){

    this.authService.read().subscribe(data => {

      this.info = data.map(e => {
        return {
          Email: e.payload.doc.data()['Email'],
          Location: e.payload.doc.data()['Location'],
        };
      })
      console.log(this.info);
    });
}

在 authentication.ts 中

read() {
    return this.firestore.collection('users').snapshotChanges();
  }

问题是显示所有文档数据

Answer 1

在您的服务中，您可以使用类似的方法来检索该用户的数据：

getUser(id: string) {
   return this.firestore.collection('users').doc(id).get();
}

然后你在你的组件中调用这个函数，就像这样传递你的密钥（在你的情况下是电子邮件）：

this.someService.getUser(email).then((value) => {
    console.log(value.data)
}