首页 > 解决方案 > 如何使用 Angular Ionic 从我的 Firebase 实时数据库中获取一项

问题描述

这是我的实时数据库 我想查找相关人员的文章并显示信息

[1]:https://i.stack.imgur.com/HCEga.png*

这是我的离子脚本页面

这是我的导入我可以检索要连接的用户的 ID,但我无法在实时数据库中检索此信息

  import { Component } from '@angular/core';
    import { AngularFireAuth } from '@angular/fire/compat/auth';
    import { AngularFireDatabase, AngularFireList } from '@angular/fire/compat/database';

export class Tab3Page {

  public profileData: any;
  name: string;
prenom: string;



  constructor(private afAuth: AngularFireAuth,
     private db: AngularFireDatabase,
      private toast: ToastController,
      private navCtrl: NavController,
      private authService: FirebaseAuthServiceService) {
  

    this.afAuth.authState.subscribe(
      (res)=>{
        this.profileData = res.uid;
        console.log(this.profileData);      
      }
    )

    this.db.list("users/"+this.profileData).valueChanges().subscribe(details => {
      this.name =details["name"];
      this.prenom = details["prenom"];
      console.log(details);
      
    })

}
    
}

标签: angularjstypescriptfirebaseionic-frameworkfirebase-realtime-database

解决方案


很难确定,但我感觉您在用户登录之前附加了数据库侦听器。要解决此问题,您需要将订阅调用移动到身份验证状态侦听器“

this.afAuth.authState.subscribe(
  (res)=>{
    this.profileData = res.uid;
    console.log(this.profileData);      
  }
  this.db.list("users/"+this.profileData).valueChanges().subscribe(details => {
    this.name =details["name"];
    this.prenom = details["prenom"];
    console.log(details);  
  })
)

如果这确实加载了数据,您将需要开始管理数据库订阅,因为这authState当然可能会随着时间而改变。


推荐阅读