Отображать конкретные детали при нажатии кнопки «Просмотр» под углом от Firebase

Question

Невозможно отобразить данные в форме из Google Firebase в Angular, когда я нажимаю кнопку просмотра. У меня есть страница со списком товаров. когда я нажимаю кнопку просмотра продукта, затем перехожу на новую страницу и показываю информацию о продукте. но это ничего не показывало. пожалуйста, дайте мне несколько советов, что мне делать?

prodect.service.ts

import { AngularFireDatabase } from 'angularfire2/database';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class ProductService {

  constructor(private db: AngularFireDatabase) { }

  create(product){
    return this.db.list('/products').push(product);
  }
  getAll(){
    return this.db.list('/products').snapshotChanges();
  }
  get(productId){
    return this.db.object('/products/' + productId).snapshotChanges();
  }
}

Product-form.component.ts

import { ProductService } from './../../product.service';
import { CategoryService } from './../../category.service';
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import 'rxjs/add/operator/take';

@Component({
  selector: 'app-product-form',
  templateUrl: './product-form.component.html',
  styleUrls: ['./product-form.component.css']
})
export class ProductFormComponent implements OnInit {
  categories$;
  product={};
  constructor(
    private router: Router,
    private route: ActivatedRoute,
    private categoryService: CategoryService,
    private productService: ProductService) {
    this.categories$ = categoryService.getCategoris();

    let id= this.route.snapshot.paramMap.get('id');
    if(id)
      this.productService.get(id).take(1).subscribe( p => this.product = p);
  }

  save(product) {
    this.productService.create(product);
    this.router.navigate(['/admin/products']);
  }

  ngOnInit() {
  }

}

Product-form.component.html

<div class="row">
    <div class="col-md-6">
            <form #f="ngForm" (ngSubmit)="save(f.value)" >
                    <div class="form-group">
                        <label for="title">Title</label>
                        <input #title="ngModel" [(ngModel)]="product.title" name="title" id="title" type="text" class="form-control" required>
                        <div class="alert alert-danger" *ngIf="title.touched && title.invalid">
                            Title is required.
                        </div> 
                    </div>
                    <div class="form-group">
                        <label for="price">Price</label>
                        <div class="input-group">
                            <span class="input-group-text">$</span>
                            <input #price=ngModel [(ngModel)]="product.price" name="price" id="price" type="number" class="form-control"required [min]="0"> 
                        </div>
                        <div class="alert alert-danger" *ngIf="price.touched && price.invalid">
                            <div *ngIf="price.errors.required" >Price is required.</div>
                            <div *ngIf="price.errors.min" >Price should be 0 or high.</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="category">Category</label>
                        <select #category=ngModel [(ngModel)]="product.category" name="category" id="category" class="form-control" required>
                            <option value="">Select Category</option>
                            <option *ngFor = "let c of categories$ | async" [value]="c.key">
                                {{ c.payload.val().name }}
                            </option>  
                        </select>
                        <div class="alert alert-danger" *ngIf="category.touched && category.invalid">
                            Category is required.
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="imageUrl">Image URL</label>
                        <input #imageUrl="ngModel" [(ngModel)]="product.imageUrl" name="imageUrl" id="imageUrl" type="text" class="form-control" required url>
                        <div class="alert alert-danger" *ngIf="imageUrl.touched && imageUrl.invalid">
                            <div *ngIf="imageUrl.errors.required">ImageURL is required.</div>
                            <div *ngIf="imageUrl.errors.url">Please enter a valid URL.</div>
                        </div>
                    </div>
                    <button class="btn btn-primary">Save</button>
                </form>
    </div>
    <div class="col-md-6">
            <div class="card" style="width: 22rem; margin-top: 30px" >
                    <img [src]="product.imageUrl" class="card-img-top" *ngIf="product.imageUrl">
                    <div class="card-body">
                      <h5 class="card-title">{{product.title}}</h5>
                      <p class="card-text">{{product.price | currency: 'USD':true}}</p>
             </div>
          </div>
    </div>
</div>