如何解决从Firebase实时数据库中检索数据
我是离子新手。我创建了一个离子应用程序,并在其中使用了Firebase身份验证。当我使用电子邮件和密码登录离子应用程序时,它会导航到个人资料页面。在个人资料页面中,当用户提交详细信息时,数据将存储在 firebase实时数据库中。但是,当我尝试检索该数据时,我没有从我的 firebase实时数据库中获取任何数据,并显示了这样的错误。
InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'.
这是错误。 https://i.stack.imgur.com/hCqRn.png
这里是dashboard.page.ts
import { Component,OnInit } from "@angular/core";
import { AngularFireAuth } from "angularfire2/auth";
import { AngularFireDatabase } from "angularfire2/database";
import {
ToastController,NavController,LoadingController,} from "@ionic/angular";
import { Profile } from "../models/profile";
import { AngularFireObject } from "angularfire2/database";
@Component({
selector: "app-dashboard",templateUrl: "./dashboard.page.html",styleUrls: ["./dashboard.page.scss"],})
export class DashboardPage implements OnInit {
profileData: AngularFireObject<Profile>;
constructor(
private afAuth: AngularFireAuth,private toast: ToastController,private navCtrl: NavController,private LoadCtrl: LoadingController,private afDatabase: AngularFireDatabase
) {}
ngOnInit() {
this.afAuth.authState.subscribe((data) => {
if (data && data.email && data.uid) {
this.toast
.create({
message: `Welcome to Manoj_APP,${data.email}`,duration: 2000,})
.then((toastData) => toastData.present());
this.profileData = this.afDatabase.object(`profile/${data.uid}`);
} else {
this.toast
.create({
message: `Could Not Find Authentication details`,})
.then((toastData) => toastData.present());
this.navCtrl.navigateRoot("tabs/tab1");
}
});
}
async logout() {
let loader = this.LoadCtrl.create({
message: "Loging Out",duration: 3000,});
await (await loader).present();
try {
await this.afAuth.auth.signOut().then((data) => {
console.log(data);
this.navCtrl.navigateRoot("tabs/tab1");
});
} catch (e) {
console.log("Logout Failed");
}
}
}
这里是dashboard.component.html
<ion-header>
<ion-toolbar color="primary">
<ion-tab-menu slot="start">
<ion-menu-button></ion-menu-button>
</ion-tab-menu>
<ion-title>Welcome Here</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<ion-card>
<ion-item>
<p>Username :{{(profileData | async)?.firstName}}</p>
</ion-item>
<ion-item>
<p>First Name :{{(profileData | async)?.lastName}}</p>
</ion-item>
<ion-item>
<p>Last Name :{{(profileData | async)?.username}}</p>
</ion-item>
</ion-card>
</ion-content>
<ion-tabs>
<ion-tab-bar>
<ion-tab-button (click)="logout()">
<ion-icon name="log-out-outline"></ion-icon>
<ion-label>Logout</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
解决方法
代替
profileData: AngularFireObject<Profile>;
写
profileData: Observable<Profile>;
和
this.profileData = this.afData
.object(`profile/${data.uid}`);
到
this.profileData = this.afData
.object<Profile>(`profile/${data.uid}`).valueChanges();
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。