使用 ionic angular 6 管理 Firebase 中的用户

Question

我尝试使用平台 ionic 和 angar 6 构建简单的应用程序数据库。我想让当前登录的用户显示数据库中用户的邮箱。

我把这段代码放在constructor 中，他在控制台中工作正常，甚至我得到了用户的电子邮件添加器，但他没有显示在 html 中

 import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams,AlertController,ToastController,PopoverController} from 'ionic-angular';
import { AngularFireAuth } from '@angular/fire/auth';
import { HomePage } from '../home/home';
import { PostfeedPage } from '../postfeed/postfeed';
import { PopoverpagePage } from '../popoverpage/popoverpage';
import { AngularFireDatabase ,AngularFireObject,AngularFireList} from '@angular/fire/database';
import { Observable } from 'rxjs-compat';
import { map } from 'rxjs/operators';
import { EditpostPage } from '../editpost/editpost';
import { FirebaseDatabase } from '@angular/fire';
import { Profile } from '../../app/Profile';

@IonicPage()
@Component({
  selector: 'page-feed',
  templateUrl: 'feed.html',
})
export class FeedPage {
  name :string='';
  title :string='';
  adderss : string ;
profile = {} as Profile
items: Observable<any[]>;
itemsRef: AngularFireList<any>;

profileData : AngularFireObject <Profile>

  constructor(public navCtrl: NavController, public navParams: NavParams,public fire: AngularFireAuth
    ,public alertCtrl: AlertController,public toastCtrl: ToastController,public popoverCtrl: PopoverController, 
    public db: AngularFireDatabase) 
    {
        this.itemsRef = db.list('report');
        // Use snapshotChanges().map() to store the key
        this.items = this.itemsRef.snapshotChanges().pipe(
          map(changes => 
            changes.map(c => ({ key: c.payload.key, ...c.payload.val() }))
          )
        );

        // this.fire.authState.take(1).subscribe(data =>{

        //   if (data && data.email && data.uid){
        //     this.profileData = this.db.object(`profile/${data.uid}`)
        //   console.log(this.profileData)
        //   }

        // })


     }
     ionViewDidLoad() {
      this.fire.auth.onAuthStateChanged(function(user) {
          if (user) {
            var curreuserntUser = this.fire.auth.currentUser;
           this.adderss = curreuserntUser.email;
            console.log(this.adderss);



            } 
            else {
            // No user is signed in.
          }
        }); 
  }
  showConfirm() {
    const confirm = this.alertCtrl.create({
      title: 'Confirm',
      message: 'Are you sure to sign out ?',
      buttons: [
        {
          text: 'No',
          handler: () => {
            confirm.dismiss()
          }
        },
        {
          text: 'Yes',
          handler: () => {
            this.fire.auth.signOut().then(user=>{
              this.navCtrl.setRoot(HomePage)

            });
            console.log('Agree clicked');
          }
        }
      ]
    });
    confirm.present();
  }
  presentPopover(myEvent) {
    let popover = this.popoverCtrl.create(PopoverpagePage);
    popover.present({
      ev: myEvent

    });
  }

  deletReport(key : string) {
    let alert = this.alertCtrl.create({
      title: 'Warning',
      message: 'Are you sure you want to delete this post ?',
      buttons: [ {
        text: 'No',
        handler: () => {
        }
      },
        {
          text: 'Yes',
          handler: () => {
            this.itemsRef.remove(key);

          }
        }

      ]          
  });
  alert.present()
  }

  updatereport(id,name,title){
    console.log(id,name,title,)
    this.navCtrl.push(EditpostPage,{
      key:id,
      name:name,
      title:title,
    })

  }

}

在html中

{{adderss.email}}

Answer 1

将该代码放入ionViewDidLoad() { // here }，它将按预期工作。

  ionViewDidLoad() {
      fire.auth.onAuthStateChanged(function(user) {
          if (user) {
            var curreuserntUser = fire.auth.currentUser;
           this.adderss = curreuserntUser.email;
            console.log(this.adderss);



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