如何在Ionic 3中展示Firebase数据库中的数据？

我来帮你搞定把Firebase用户数据展示到Ionic视图的问题，结合你的代码和数据结构，给你一套完整的解决方案：

1. 修正组件控制器代码 #

首先注意，AngularFire2新版本中valueChanges()返回的是标准Observable<T>，而非旧版的FirebaseObjectObservable。另外，建议用async管道在视图中处理订阅，避免手动订阅带来的内存泄漏问题。修正后的代码如下：

import { Component } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';
import { AngularFireDatabase } from '@angular/fire/database';
import { Observable } from 'rxjs';

// 定义匹配数据库结构的Profile接口
interface Profile {
  firstName: string;
  lastName: string;
  username: string;
}

@Component({
  selector: 'app-profile',
  templateUrl: './profile.page.html',
  styleUrls: ['./profile.page.scss'],
})
export class ProfilePage {
  profile$: Observable<Profile>; // 用Observable替代旧的FirebaseObjectObservable

  constructor(private afAuth: AngularFireAuth, private afDatabase: AngularFireDatabase) {
    // 监听用户登录状态，获取UID后拉取对应profile数据
    this.afAuth.authState.subscribe(user => {
      if (user?.uid) { // 可选链操作符让代码更安全
        this.profile$ = this.afDatabase.object<Profile>(`profile/${user.uid}`).valueChanges();
      }
    });
  }
}

2. 在Ionic视图中绑定数据 #

接下来在HTML模板中，用async管道订阅Observable，确保数据加载完成后再渲染，同时处理加载状态：

<ion-header>
  <ion-toolbar>
    <ion-title>用户资料</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <!-- 数据加载完成后渲染用户信息 -->
  <div *ngIf="profile$ | async as profile">
    <ion-list>
      <ion-item>
        <ion-label>名字</ion-label>
        <ion-text>{{ profile.firstName }}</ion-text>
      </ion-item>
      <ion-item>
        <ion-label>姓氏</ion-label>
        <ion-text>{{ profile.lastName }}</ion-text>
      </ion-item>
      <ion-item>
        <ion-label>用户名</ion-label>
        <ion-text>{{ profile.username }}</ion-text>
      </ion-item>
    </ion-list>
  </div>

  <!-- 数据加载中显示加载动画 -->
  <div *ngIf="!(profile$ | async)" class="ion-text-center">
    <ion-spinner name="crescent"></ion-spinner>
    <p>加载中...</p>
  </div>
</ion-content>

3. 常见问题排查 #

如果数据无法正常显示，先检查这几点：

• Firebase安全规则：确保profile/${uid}路径允许登录用户读取，示例规则如下：

  {
    "rules": {
      "profile": {
        "$uid": {
          ".read": "$uid === auth.uid",
          ".write": "$uid === auth.uid"
        }
      }
    }
  }
  

• 用户登录状态：确认用户已成功登录，authState返回的用户对象包含有效的uid。
• 数据结构匹配：检查数据库中profile/${uid}下的字段名是否和Profile接口完全一致（注意大小写敏感）。

内容的提问来源于stack exchange，提问作者her03