Проблема с реализацией двухсторонней привязки данных

Question

Я реализую операцию CRUD, в которой не работает двусторонняя привязка данных.

update-product.htm:

<form #productForm="ngForm" (ngSubmit)="updateProduct(productForm.value)">
      <div class="form-group">
          <label for="comment">Product description:</label>
          <textarea class="form-control" rows="5" id="comment" name="description" ngModel [(ngModel)]="product.description"></textarea>
        </div> 
    <div class="form-group">
        <label for="qua">Quality</label>
        <select class="form-control" id="qua" name="quality" ngModel [(ngModel)]="product.quality">
          <option>Grade-1</option>
          <option>Grade-2</option>
          <option>Grade-3</option>
        </select>
      </div>     
      <button mat-stroked-button color="primary" type="submit">Submit</button>

  </form>

Яздесь возникает ошибка как в product.description, так и в product.quality.

update-prod.ts:

ngOnInit() {
       this.routes.params.subscribe(params => {
          this.id = +params['id'];
       });
       this.productService.getProducts()
       .subscribe((data: Response) => {
         this.products = JSON.stringify(data);

    for (let i = 0; i < this.products.length; i++) {
         if ((this.procuts[i].id) === (this.id)) {
           this.product= this.products[i];

         }
       }
       });
  }

 updateProduct(form: any) {
  this.productService.updateProducts(form, this.id).subscribe(
    (data: any) => data.json()
  );
      this.route.navigate(['/update']);
 }

update-service:

updateProducts(productForm, id) {
        const temp = {
            'description': productForm.description,
            'quality': productForm.quality
        };
        return this.httpObj.put(`${this.uri}/products/${id}`, JSON.stringify(temp), {
            headers: new HttpHeaders({
                'Content-Type': 'application/json'
            })
    });
  }

Еще одна большая проблема заключается в том, что после любой операции CRUD страница не обновляется автоматически даже после добавления маршрутизатора.

{
  "products": [
    {
      "id": 1,
      "description": "Tasty apples",
      "quality": "Grade-1",
    },
    {
      "id": 2,
      "description": "Juicy mangoes",
      "quality": "Grade-2",

    }}

И продукт представляет собой объект, который добавляетзначения в нем через цикл.