如何显示 AngularFirestore 数据答案

【问题标题】：How to display AngularFirestore data如何显示 AngularFirestore 数据
【发布时间】：2018-06-24 16:38:45
【问题描述】：

我正在尝试从我的 firestore 数据库中显示用户名和年龄，但没有出现任何错误，但没有显示任何内容。我在这里做错了什么？

home.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams} from 'ionic-angular';
import { AngularFireAuth } from 'angularfire2/auth';
import { AngularFirestore} from 'angularfire2/firestore';
import { Profile } from './../../models/profile';


@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
})
export class HomePage {

  profcollection: AngularFirestore<Profile>;

  constructor(private afs: AngularFirestore, private afAuth: AngularFireAuth, public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewWillLoad() {
    this.afAuth.authState.take(1).subscribe(data => {
      if (data && data.email && data.uid) {

        this.profcollection = this.afs.collection('profiles').doc(`${data.uid}`).valueChanges();

      }else{
        this.navCtrl.setRoot('LoginPage');
      }
    })
  }
}

home.html

<ion-content padding>
  <p>Username: {{profcollection.username}} </p>
  <p>Age: {{profcollection.age}} </p>
</ion-content>

【问题讨论】：

console.log(JSON.stringify(this.profcollection));
其输出 Observable {_isScalar: false, source: Observable, operator: MapOperator}

标签： angular typescript firebase google-cloud-firestore

【解决方案1】：

试试这个代码

 profcollection: any;
 const profileDoc = afs.collection('profiles').doc(user.uid);
 profileDoc.valueChanges().subscribe((profile: any) => {
      this.profcollection = profile;
 });

【讨论】：

【解决方案2】：

在您的标记中，您还可以像这样使用 aync 管道直接订阅数据：

<p>Username: {{ (profcollection | async).username }}</p>

如果您不需要在组件中显示数据之前在 UI 上操作数据，则那里的异步管道将订阅数据。

【讨论】：