Question

所以我正在制作一个基于Ionic 3的App，并将用户的名字，姓氏等数据保存到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>

从Firebase实时数据库显示数据

1 个答案: