Question

我试图在我的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>

Answer 1

试试此代码

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

Answer 2

在您的标记中，您还可以使用异步管道直接订阅数据，如下所示：

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

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

如何显示AngularFirestore数据

2 个答案: