How can I delete a row by its SKU instead of its ID?-CodePudding

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  (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  (click)="onDeleteProductBySku(deleteClick?.sku)">Delete</button>

CodePudding user response：

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 
  
  (click)="onDeleteProductBySku(product?.sku)"
>
Delete
</button>

<!-- Or maybe?
(click)="onDeleteProductBySku(this.deleteProduct?.sku)"
-->