angular - 使用 ionic angular 6 在 Firebase 中管理用户
问题描述
我正在尝试使用平台 ionic 和 Angular 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}}
解决方案
将该代码放入其中,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.
}
});
}
推荐阅读
- java - 限制注释的类类型
- angular - 模型中的打字稿方法给出错误“不是函数”
- java - 为 .conf 文件中的默认 jvm 参数获取 null
- html - 我的默认 .json 首选项在括号中更改
- openstack - 使用梯形校正时遇到此错误
- twitter - 一些推特帖子有多个推文 ID
- css - keydown 触发 css 背景颜色变化
- bash - Flux 调试有什么用?在下面的代码中它检查什么。?
- ruby-on-rails - 从数据库中打印另一个类的所有对象和属性,ROR
- google-sheets - 如何在 Google 电子表格中使用自定义脚本进行条件格式设置?