title: Angular Firestore - Get document data and assign to variable
body: <p>I'm trying to assign the data collected from a firestore document to a variable with an Observable type initialised before the constructor.</p>
  
  <p>I've got the data from the collection by passing in a dynamic invoiceId string to the .doc() search, and I can assign the data to a local variable (shown below), but when trying to assign it to this.invoice, I get the following error:</p>
  
  <blockquote>
    <p><em>Uncaught (in promise): TypeError: Cannot set property 'invoice' of undefined</em></p>
  </blockquote>
  
  <p>-</p>
  
  <p><strong>Component:</strong></p>
  
  <pre><code>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';
  
  @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&lt;Invoice&gt;;
    invoices: Observable&lt;Invoice[]&gt;;
  
    invoice: Observable&lt;Invoice&gt;;
  
    constructor(private authService: AuthService, private db: AngularFirestore, private route: ActivatedRoute) {
        this.userId = this.authService.user.uid;
  
        this.route.params.subscribe(params =&gt; {
          this.invoiceId = params.id;
        })
  
        this.invoicesCollection = this.db.collection('/invoices');
  
        this.invoices = this.invoicesCollection.snapshotChanges().map(changes =&gt; {
            return changes.map(a =&gt; {
              const data = a.payload.doc.data() as Invoice;
              data.id = a.payload.doc.id;
              return data;
            })
        })
    }
  
    ngOnInit() {
      this.getInvoice();
    }
  
    getInvoice() {
      var docref = this.db.collection('/users').doc(this.authService.user.uid).collection('/invoices').doc(this.invoiceId);
      docref.ref.get()
          .then(function(doc) {
              if (doc.exists) {
                  var invoice = doc.data(); &lt;------WORKS
                  // this.invoice = doc.data(); &lt;------DOESN'T WORK
                  console.log('Invoice data: ', doc.data());
              } else {
                  console.error('No matching invoice found');
              }
      })
    }
  
  }
  </code></pre>