Angular / Firestore - 在视图模板中获取单个文档和访问权限

Question

我已经尝试了大约一个星期从firestore集合中获取单个文档，并通过视图模板中的选择器访问它，如{{invoice.id}}。

我尝试了四种不同的方法，如下所示，尝试从文档中获取数据，使其能够用作模板中的普通对象，但最接近的我已经能够get使用选择器中的json管道输出对象，如{{ invoice | json }}。

以json格式输出正确的数据，但是当尝试在发票对象上使用字段选择器时，它返回undefined，并将this.invoice注销到控制台，将其输出为AngularFirestoreDocument。

查看-invoice.component.html：

<!-- (These return 'undefined'

  <p>{{ invoice.id }} </p>

  <p>{{ (invoice | async)?.id }}</p>

-->

<!-- This outputs correctly as json -->
<p>{{ invoice | json }}

-

查看-invoice.component.ts：

import { Component, OnInit, Input } from '@angular/core';

import { ActivatedRoute } from '@angular/router';

import { Observable } from 'rxjs/Observable';

import { AngularFireDatabase } from 'angularfire2/database';

import { AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument } from 'angularfire2/firestore';

import { AuthService } from '../../services/auth.service';

import { Invoice } from '../invoiceModel';import 'rxjs/add/operator/mergeMap';

@Component({
  selector: 'app-view-invoice',
  templateUrl: './view-invoice.component.html',
  styleUrls: ['./view-invoice.component.scss']
})

export class ViewInvoiceComponent implements OnInit {

  userId: string;

  invoiceId: any;

  invoicesCollection: AngularFirestoreCollection<Invoice>;
  invoices: Observable<Invoice[]>;

  invoiceDoc: AngularFirestoreDocument<Invoice>;
  invoice: Observable<Invoice>;

  constructor(private authService: AuthService, private db: AngularFirestore, private route: ActivatedRoute) {
    this.userId = this.authService.user.uid;

    this.route.params.subscribe(params => {
        this.invoiceId = params.id;
    })

    this.invoicesCollection = this.db.collection('/invoices');

    this.invoices = this.invoicesCollection.snapshotChanges().map(changes => {
        return changes.map(a => {
            const data = a.payload.doc.data() as Invoice;
            data.id = a.payload.doc.id;
            return data;
        })
    })
  }

  ngOnInit() {
    this.getInvoice();
    console.log('this.invoice: ');
    console.log(this.invoice);
  }

  getInvoice() {

    /* #1 - CURRENT ATTEMPT - THIS.INVOICE OUTPUTS AS 'UNDEFINED' IN CONSOLE, BUT CAN OUTPUT AS JSON IN VIEW */
    const that = this;
    var invoicedoc = this.db.collection('/users').doc(this.userId).collection('/invoices').doc<Observable<Invoice>>(this.invoiceId);
    invoicedoc.valueChanges()
        .subscribe(a => {
            that.invoice = a as Observable<Invoice>;
        })

    /* #2 - RETURNS SAME AS #1
    this.invoiceDoc = this.db.doc<Invoice>('/users' + this.userId + '/invoices' + this.invoiceId);
    this.invoice = this.invoiceDoc.valueChanges();
    */

    /* #3 -  RETURNS SAME AS #1
    this.invoice = this.db.collection('/users').doc(this.userId).collection('/invoices', ref => ref.where('invoiceId', '==', this.invoiceId).limit(1)).valueChanges().flatMap(result => result);
    */

    /* #4 -  LOGGING THIS.INVOICE TO CONSOLE RETURNS 'UNDEFINED'
    const _that = this;
    var docref = this.db.collection('/users').doc(this.authService.user.uid).collection('/invoices').doc<Invoice>(this.invoiceId);
    docref.ref.get()
        .then(function(doc) {
            if (doc.exists) {
                var invoice = doc.data();
                _that.invoice = doc.data() as Invoice;
                console.log('Invoice data: ', doc.data());
            } else {
                console.error('No matching invoice found');
            }
    })
    */

  }

}