实现双向数据绑定的问题

时间:2018-09-23 14:03:00

标签: angular data-binding httpclient

我正在执行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上我都遇到错误。

更新产品:

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']);
 }

更新服务:

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",

    }}

乘积是一个对象,它通过循环在其中添加值。

0 个答案:

没有答案