从 Firebase 实时数据库中检索数据

Question

我是离子新手。我创建了一个离子应用程序，并在其中使用了 firebase 身份验证。当我使用电子邮件和密码登录我的 ionic 应用程序时，它会导航到个人资料页面。在个人资料页面中，当用户提交详细信息时，数据将存储在 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`,
            duration: 2000,
          })
          .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>

Answer 1

代替

profileData: AngularFireObject<Profile>;

写

profileData: Observable<Profile>;

和

this.profileData = this.afData
          .object(`profile/${data.uid}`);

到

this.profileData = this.afData
          .object<Profile>(`profile/${data.uid}`).valueChanges();