Ionic Angular Firestore获取字段值

Question

我正在尝试从文档中获取字段值并将其显示在html文件中。你如何获得现场价值？例如，显示用户名。下面是目前为止数据存储方式和代码的图片。我得到的错误是

  

无效的文档参考。文档引用必须是偶数   细分数量

我相信我只是以错误的方式获取数据。

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 {
  prodcollection: AngularFirestore<Profile> = this.afs.collection('profiles');

  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.prodcollection = this.afs.doc(`${data.uid}`).valueChanges();
      }else {
        this.navCtrl.setRoot('LoginPage');
      }
    })
  }
}

Home.html中

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <p>Username: {{prodcollection.username}} </p>
</ion-content>

Answer 1

使用firestore，您必须先订阅数据并将其放入对象中，然后才能使用数据。

prodcollection: AngularFirestore<Profile>;
profile = {} as Profile;

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

this.prodcollection.subscribe(
profile => this.profile = profile);