CRUD - Angular 2无法更新

时间:2018-01-11 11:28:16

标签: angular api mean-stack angular2-forms

我目前正在尝试更新上传到Heroku的数据库中的产品。但提交时表单不起作用。主要目标是使用id:

更新产品
  

5a1fe407bc970801902c6c74

app.component.html:

<form>
<b>You will now edit product with ID: 5a1fe407bc970801902c6c74</b><br>
Name:
<input type="text" [(ngModel)]= "product_name" placeholder="{{ product_name}}" name="product_name"><br>
Description
<input type="text" [(ngModel)]= "product_description" placeholder="{{ product_description}}" name="product_description"><br>
<input type="submit" value="Update">
</form>

index.js

app.put('/example', function(req, res)  {
    Product.findByIdAndUpdate("5a1fe407bc970801902c6c74", { $set: req.body }, { new: true }, function (err, product) {
        res.send(product);
    });
});

app.component.ts

ngOnInit() {
this.shopService.getAll()
    .subscribe(data => this.categories = data);

    this.shopService.getOne()
    .subscribe((data: any) => {
      this.product_name = data.name;
      this.product_description = data.description;
    });
  }
}

shop.service.ts

  updateOne(product_name: string, product_description: string) {
    let headers = new Headers();
    headers.append('Content-Type', 'application/json');

    let data = {
      name: product_name,
      description: product_description
    };

  return this.http
  .put('/example', JSON.stringify(data), {headers: headers})
  .map(res => res.json());
  }

}

1 个答案:

答案 0 :(得分:0)

.put(返回一个冷可观察者。如果你不subscribe(我认为它不会做任何事......