我正在执行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",
}}
乘积是一个对象,它通过循环在其中添加值。