這裏是我想要實現的,我試圖打印出個人資料圖片和用戶名,而我已經登錄使用離子應用程序中的Firebase身份驗證,我想獲取個人資料照片和我的用戶名,我該怎麼做?如何在google auth中使用angularfire2從firebase3中正確地獲取個人資料圖片和用戶名
這裏是我的app.component.ts:
export class MyApp {
rootPage:any = LoginPage;
constructor(platform: Platform, private auth: FirebaseAuth) {
this.auth.subscribe((data) =>{
if(data){
window.localStorage.setItem('uid', data.auth.uid);
window.localStorage.setItem('displayName', data.auth.displayName);
window.localStorage.setItem('photoUrl', data.auth.photoURL);
this.rootPage = HomePage;
}
})
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
StatusBar.styleDefault();
Splashscreen.hide();
});
}
}
就在我app.component.ts我設置UID,用戶名和photoURL 但是當我試圖把它打印出來的HTML,它顯示不出來,它說空了我的「用戶名」和空白網址爲我的「photoURL」
這裏是我的login.ts代碼:
export class LoginPage {
constructor(public nav: NavController, private auth: FirebaseAuth) {}
ionViewDidLoad() {
console.log('Hello LoginPage Page');
}
LoginGoogle(){
this.auth.login({
provider: AuthProviders.Google,
method: AuthMethods.Redirect
}).then((data)=>{
this.nav.setRoot(HomePage);
})
}
}
這裏是我home.ts:
export class HomePage {
firelist: FirebaseListObservable<any>;
chat:any;
constructor(public navCtrl: NavController, private af:AngularFire, private auth: FirebaseAuth) {
this.firelist = this.af.database.list('/chat',
{
query:{
orderByChild: 'negativtimestamp'
}
});
}
chatSend(va,vi){
this.af.database.list('/chat').push({
uid: window.localStorage.getItem('uid'),
username : window.localStorage.getItem('displayName'),
img : window.localStorage.getItem('photoURL'),
chat_text: va.chatText,
timestamp: Date.now(),
negativtimestamp: -Date.now()
})
this.chat = '';
console.log(window.localStorage.getItem('displayName'));
}
logout(){
window.localStorage.removeItem('uid');
window.localStorage.removeItem('displayName');
window.localStorage.removeItem('photoURL');
this.auth.logout();
this.navCtrl.setRoot(LoginPage);
}
}
這裏是我的home.html的
<ion-content>
<ion-list>
<ion-item *ngFor="let item of firelist | async">
<ion-avatar>
<img src="{{item.img}}"/>
</ion-avatar>
<h2 class="chat-username">{{item.username}}</h2>
<p class="chat-text">{{item.chat_text}}</p>
<h6 class="chat-time">{{item.timestamp}}</h6>
</ion-item>
</ion-list>
</ion-content>
<ion-footer>
<form #f="ngForm">
<ion-grid>
<ion-row>
<ion-col width-80>
<ion-input [(ngModel)]="chat" name="chatText" placeholder="pesan.."></ion-input>
</ion-col>
<ion-col>
<button (click)="chatSend(f.value, f.valid)" full [disabled]="f.valid === false">Send</button>
</ion-col>
<ion-col>
<button (click)="logout()">Logout</button>
</ion-col>
</ion-row>
</ion-grid>
</form>
</ion-footer>
UPDATE: 這裏是我的用戶火力控制檯,它不說,我已經登錄,我查看上次登錄日期,是我在那個日期
這裏登陸,是我的火力數據庫「聊天」表:
我已經添加「?」問號運算符,它不工作,甚至沒有任何更改 –
您是否可以在Firebase控制檯檢查您是否實際添加了數據? – Yevgen
我已經更新我的firebase控制檯截圖在我的問題,是的,我實際登錄在該日期 –