I have an issue after my data is stored in db and I want to edit it. It is not showing data and I am getting cannot read property error.

**Html**

**admin-products.component.html**

```
<p>
  <a routerLink="/admin/products/new" class="btn btn-primary">New Products</a>
</p>
<table class="table">
  <thead>
    <tr>
      <th>Title</th>
      <th>Price</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let p of products$ | async">
      <td>{{ p.title }}</td>
      <td>{{ p.price }}</td>
      <td><a [routerLink]="['/admin/products/', p.$key]">Edit</a></td>
    </tr>
  </tbody>
</table>

```

**product-form.component.html**

If I check error link in console it is showing an error at all input field. I think mostly error may b here ?

```
    <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-prepend">
          <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 higher.</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=""></option>
          <option *ngFor="let c of categories$ | async" [value]="c.$key">
            {{ c.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">Image is required</div>
          <div *ngIf="imageUrl.errors.url">Please enter a vaild URL</div>
        </div>
      </div>
      <button class="btn btn-primary">Save</button>
    </form>
  </div>
  <div class="col-md-6">
    <div class="card" style="width: 18rem;">
      <img
        class="card-img-top"
        [src]="product.imageUrl"
        *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>

```

**product-form.component.ts**

```
    import { Component } from '@angular/core';
import { CategoryService } from 'src/app/category.service';
import { ProductService } from 'src/app/product.service';
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 {
  categories$;
  product = {};

  constructor(
    private router: Router,
    private route: ActivatedRoute,
    private categoryService: CategoryService,
    private productService: ProductService
  ) {
    this.categories$ = categoryService.getCategories();

    // tslint:disable-next-line:prefer-const
    let id = this.route.snapshot.paramMap.get('id');
    // tslint:disable-next-line:curly
    if (id)
      this.productService.get(id).valueChanges().take(1).subscribe(p => (this.product = p));
  }

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

```

**product-service.ts**

```
import { Injectable } from '@angular/core';
import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';
@Injectable()
export class ProductService {
  products$: AngularFireList<any[]>;
  constructor(private db: AngularFireDatabase) {
    this.products$ = this.db.list('/products');
  }
  create(product) {
    return this.products$.push(product);
  }

  getAll() {
    return this.db.list('/products').valueChanges();
  }

  get(productId) {
    return this.db.object('/products/' + productId);
  }
}

```

I have tried this method by using \*ngIf , [ngModel]="product?.title"

> 
> `<input *ngIf="title">`
> 
> 
>