如何使用 Angular Ionic 从我的 Firebase 实时数据库中获取一项

Posted

技术标签:

【中文标题】如何使用 Angular Ionic 从我的 Firebase 实时数据库中获取一项【英文标题】:How to get one items from my Firebase realtime Database with Angular Ionic 【发布时间】:2021-12-13 23:49:53 【问题描述】:

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

这是我的离子脚本页面

这是我的导入 我可以检索要连接的用户的 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);
      
    )


    

【问题讨论】:

“我无法检索此信息” 为什么不呢?您共享的代码有什么问题?是否显示任何错误消息? console.log 输出是什么? details 必须是从当前用户的实时数据库中获取的结果。但它没有从实时数据库中收到任何数据。 【参考方案1】:

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

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 当然可能会随着时间而改变。

【讨论】:

【参考方案2】:

感谢弗兰克的干预 我看到我的问题只是局部变量的问题

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[2];
      console.log(this.name);
      
    )
    
  
)

【讨论】:

以上是关于如何使用 Angular Ionic 从我的 Firebase 实时数据库中获取一项的主要内容,如果未能解决你的问题,请参考以下文章

我们如何在 ionic2/Angular2 中集成或使用 AWS API 网关 SDK

如何将数据传递给 Modal ionic 2

ionic 2 和 iOS10 的 CSP 之争

动态设置 scss 变量 angular ionic

如何循环遍历对象数组中的对象数组并使用 Angular/Ionic 在我的 HTML 中显示?

如何使用gridFs将我的后端与我的前端与angular2和ionic2连接起来?