title: Retrive firebase object using snapshotchanges
body: <p>I want to retrive one product from my product list using <code>snanshotChanges</code>.
  Here is my code step by step:</p>
  
  <p>Here's the interface:</p>
  
  <pre><code>export interface Product {
    title: string;
    price: number;
    category: string;
    imageUrl: string;
  }
  </code></pre>
  
  <p>Here's the Service:</p>
  
  <p>I use db.object to read object from firebase.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>import { Injectable } from '@angular/core';
  import { AngularFireDatabase, AngularFireObject, AngularFireList } from '@angular/fire/database';
  import { Product } from './models/product';
  
  @Injectable({
    providedIn: 'root'
  })
  export class ProductService {
  
    constructor(private db: AngularFireDatabase) { }
  
    create(product: Product) {
     return this.db.list('/products').push(product);
    }
  
    getAll(): AngularFireList&lt;Product&gt; {
      return this.db.list('/products');
    }
  
    get(productId): AngularFireObject&lt;Product&gt; {
      return this.db.object('/products/' + productId);
    }
  
    }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here's the ProductDetailsComponent Class:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>import { Component, OnInit } from '@angular/core';
  import { CategoryService } from 'app/category.service';
  import { ProductService } from 'app/product.service';
  import { Router, ActivatedRoute } from '@angular/router';
  import {map} from 'rxjs/operators';
  import { Observable } from 'rxjs/Observable';
  
  @Component({
    selector: 'app-product-form',
    templateUrl: './product-form.component.html',
    styleUrls: ['./product-form.component.css']
  })
  export class ProductFormComponent implements OnInit {
  
    categories$;
    categories;
    product = {};
  
    constructor(private router: Router, private route: ActivatedRoute,
      categoryService: CategoryService,
      private productService: ProductService) {
      this.categories = categoryService.getCategories();
      this.categories$ = this.categories.snapshotChanges().map(changes =&gt; {
      return changes.map(c =&gt; ({ key: c.payload.key, ...c.payload.val()}));
       });
  
  
    
      const param_id = this.route.snapshot.paramMap.get('id');
      if (param_id) {
         this.productService.get(param_id).snapshotChanges().pipe(map(changes =&gt; {
          return changes.payload.val() })).subscribe(p =&gt; this.product = p);
  
      }
    }
  
  
    save(product) {
     this.productService.create(product);
     this.router.navigate(['admin/products']);
     }
  
     ngOnInit() {
  
  
  
  
  
  
        }
      }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here's the Template:</p>
  
  <pre><code>&lt;input 
    #title="ngModel" 
    [(ngModel)] = "product.title" 
    name="title" 
    id="title" 
    type="text" 
    class="form-control" 
    required&gt;
  </code></pre>
  
  <p>The Error I'm getting:</p>
  
  <blockquote>
    <p>ERROR TypeError: Cannot read property 'title' of undefined
    Error ERROR TypeError: changes.map is not a function</p>
  </blockquote>