Question

我试图从firestore集合中获取单个文档，我可以在组件的视图模板中引用该文档（如{{invoice.id}}。

我可以将文档数据作为Observable获取，但是当我尝试在模板中引用它时，无法获取要显示的值。

查看-invoice.component.html：

<h4 class="page-title">Invoice Summary</h4>

<h5>Invoice ID: {{ (invoice.id | async).id }}</h5>

查看-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[]>;

  invoice: Observable<{}>;

  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() {
    this.invoice = this.db.collection('/users').doc(this.userId).collection('/invoices', ref => ref.where('invoiceId', '==', this.invoiceId).limit(1)).valueChanges().flatMap(result => result);
  }

}

Angular / Firestore - 获取单个文档并在视图模板中使用

0 个答案: