如何在 Ionic 3 中显示来自 firebase 数据库的数据？答案

【问题标题】：How to display data from firebase database in Ionic 3?如何在 Ionic 3 中显示来自 firebase 数据库的数据？
【发布时间】：2018-03-27 14:09:08
【问题描述】：

我想将我的数据库数据显示到离子视图中。这里是我数据库中的详细数据：

{firstName: "John", lastName: "Doe", username: "jhondoe"}

我在页面控制器中的代码：

import { AngularFireDatabase,  FirebaseObjectObservable  } from 'angularfire2/database';

profile : FirebaseObjectObservable<Profile>;


this.afAuth.authState.subscribe(data => {
  if(data.email && data.uid){   
    this.afDatabase.object(`profile/${data.uid}`).valueChanges().subscribe(profile => {   
      this.profile = profile;
      console.log(profile);
    });

});

查看页面：

<ion-content padding>

  <p>Username: {{ profile?.username | async }}</p>
  <p>First Name: {{ profile?.firstName  | async }}</p>
  <p>Last Name: {{ profile?.LastName  | async }}</p>

</ion-content>

但它不起作用，并显示错误：

InvalidPipeArgument：管道“AsyncPipe”的“John”

【问题讨论】：

标签： firebase-realtime-database ionic3

【解决方案1】：

profile 不是承诺/可观察的，因为您在此处订阅后设置数据：

 this.afDatabase.object(`profile/${data.uid}`).valueChanges().subscribe(profile => {   
      this.profile = profile;
      console.log(profile);
    });

要么将profile 声明为常规对象并删除异步：

 profile : Profile;

HTML：

<p>Username: {{ profile?.username }}</p>
<p>First Name: {{ profile?.firstName}}</p>
<p>Last Name: {{ profile?.LastName}}</p>

或。

声明为 observable 且不在 ts 中订阅。

 profile : Observable<Profile>;



this.profile = this.afDatabase.object(`profile/${data.uid}`).valueChanges();

【讨论】：