显示 Firebase 实时数据库中的数据

Question

所以我正在制作一个基于 Ionic 3 的应用程序，并将用户的名字、姓氏等数据保存到 Firebase（实时数据库）中。我想要做的是将当前登录用户的 displayName 显示为离子输入的值。 下面是我的数据库结构以及我想在哪里显示 displayName 值。我尝试这样做的方法是在 ionViewWillLoad 函数中使用以下代码：

我的数据库结构：
firebase database structure

我希望 displayName 显示在哪里：
ion-input value

profile.ts

import { Component } from '@angular/core';
import { NavController, NavParams, LoadingController } from 'ionic-angular';
import { AngularFireAuth } from 'angularfire2/auth';
import { Profile } from '../../models/profile';
import { AngularFireDatabase, AngularFireObject } from 
'../../../node_modules/angularfire2/database';
import { TabsPage } from '../tabs/tabs';
//import { AngularFireObject } from 'angularfire2/database';
import * as firebase from 'firebase';

@Component({
selector: 'page-profile',
templateUrl: 'profile.html',
})

export class ProfilePage {

profile = {} as Profile;
profileData: AngularFireObject<Profile>;

constructor(private afAuth: AngularFireAuth, public loadingCtrl: LoadingController,
private afDatabase: AngularFireDatabase, 
public navCtrl: NavController, public navParams: NavParams) {

}

ionViewWillLoad(){
    this.afAuth.authState.take(1).subscribe(data => {
        if (data && data.email && data.uid) {
            this.profileData = this.afDatabase.object(`profile/${data.uid}`)
        } 
    })
}

createProfile(){
    let loading = this.loadingCtrl.create({
        content: ''
      });

      loading.present();

      setTimeout(() => {
        loading.dismiss();
      }, 1000);
    this.afAuth.authState.take(1).subscribe(auth => {
        this.afDatabase.object(`profile/${auth.uid}`).set(this.profile)
        .then(() => this.navCtrl.setRoot(TabsPage));
    })
    firebase.auth().onAuthStateChanged(user => {
        if (user) {
          // User is signed in.
          user.updateProfile({
              displayName: this.profile.displayName,
              photoURL: ""
          }).then(function() {
              console.log(user.displayName);
          }, function(error) {
              // An error happened.
          });

        } else {
          // No user is signed in.
        }
      });
   }
 }

profile.html

<ion-header>
    <ion-navbar color="primary">
        <ion-title>Profile</ion-title>
    </ion-navbar>
</ion-header>
<ion-content padding>
<ion-item>
    <ion-label color="primary" stacked>Display Name:</ion-label>
    <ion-input [(ngModel)]="profile.displayName" value="{{profileData?.displayName}}"></ion-input>
</ion-item>

<ion-item>
    <ion-label color="primary" stacked>First Name:</ion-label>
    <ion-input [(ngModel)]="profile.firstname" placeholder="Your first name.."></ion-input>
</ion-item>

<ion-item>
    <ion-label color="primary" stacked>Last Name:</ion-label>
    <ion-input [(ngModel)]="profile.lastname" placeholder="Your last name.."></ion-input>
</ion-item>

<ion-item>
    <ion-label color="primary" stacked>Birthday:</ion-label>
    <ion-datetime displayFormat="MMM DD, YYYY" [(ngModel)]="profile.birthday" placeholder="Click to set your Birthday" stacked></ion-datetime>
</ion-item>

<button ion-button clear block (click)="createProfile()">
        <ion-icon name="done-all" class="done-allIcon"></ion-icon>Update Profile
</button>
</ion-content>

Answer 1

你可以这样做：

首先，您在注册用户时需要uid，并使用相同的uid 将附加用户信息保存在配置文件集合中，例如：如果您的uid 是abxy，那么在配置文件中您的用户数据需要在里面abxy（名字等）用于此使用映射。数据需为profile/abxy/firstname

然后在你的 ngOnInit() 方法中使用这个函数。由于 ionic 使用 Angular，您可以这样做。

//Add these imports
import 'rxjs/add/operator/take'
import 'rxjs/add/operator/map'
import 'rxjs/add/operator/mergeMap'

ngOnInit() {
   this.getAuthenticatedUserProfile().subscribe(profile => {
      this.profile = <Profile>profile;
    // Or you can use this- this.profile = profile;    
    });
  }

getAuthenticatedUserProfile() {
    return this.afAuth.authState
      .map(user => user.uid)
      .mergeMap(authId => this.afDatabase.object(`profile/${authId}`).valueChanges())
      .take(1);
  }

在 HTML 中这样使用

<ion-input [value]="profile.firstname" ></ion-input>