Issue
I try to delete the row using the sku of the product. I'm using spring boot and angular. I got an error when I added the sku on my button like this one (click)="onDeleteProductBySku(deleteClick?.sku)"
it said that the Property 'sku' does not exist on type '(product: Product) => void'.
. On my command prompt, I got this error. How can I solve this problem?
Error: product/product.component.html:50:109 - error TS2339: Property 'sku' does not exist on type '(product: Product) => void'.
50 <button class="btn btn-outline-danger btn-sm me-2" (click)="onDeleteProductBySku(deleteClick?.sku)">Delete</button>
product/product.component.ts:12:16
12 templateUrl: './product.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component ProductComponent.
ProductsController.java --> This is working on the postman.
//Delete a product record using sku
//http://localhost:8080/products/deletebysku?sku=12345678
@DeleteMapping("/products/deletebysku")
@ResponseBody
private void deleteProductBySku(@RequestParam String sku){
productsService.deleteProductBySku(sku);
}
product.component.ts
public deleteProduct!: Product;
public onDeleteProductBySku(sku: string): void {
this.productServive.deleteProductBySku(sku).subscribe(
(response: void) => {
this.messageShow();
console.log(response);
this.getAllProduct();
},
(error: HttpErrorResponse) => {
this.errorMessage(error.message);
}
);
}
public deleteClick(product: Product) {
this.deleteProduct = product;
console.log("delete by sku");
}
product.service.ts
public deleteProductBySku(sku: string): Observable<void> {
return this.http.delete<void>(`${this.apiServerUrl}/products/deletebysku?sku=${sku}`);
}
product.component.html
<button class="btn btn-outline-danger btn-sm me-2" (click)="onDeleteProductBySku(deleteClick?.sku)">Delete</button>
Solution
Your deleteClick
is a function of type void, which does not return nor does it contain sku
property. Didn't you mean to call the delete function like this?
<button
class="btn btn-outline-danger btn-sm me-2"
(click)="onDeleteProductBySku(product?.sku)"
>
Delete
</button>
<!-- Or maybe?
(click)="onDeleteProductBySku(this.deleteProduct?.sku)"
-->
Answered By - mat.hudak
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.