How correctly send delete request in angular?-CodePudding

I have some troubles with sending delete request to my backend application. I have a table of products and i want add delete button for each element in table.

Here is my delete method in service:

 makeDelete(id: string){
 this.httpClient.delete(this.url   '/'   id);
}

My component ts:

export class DrinkComponent implements OnInit {
index: any;
drink: any;

constructor(private drinkService: DrinkService) { }

ngOnInit(): void {
 this.drinkService.getIndex()
  .subscribe(resp => { this.index = resp });
}

deleteItem(drink: any){
 this.drink = drink;
 console.log(this.drink.id);
 this.drinkService.makeDelete(drink.id);
}

And HTML:

<body>
    <div >
        <div >
            <div >
                <span >
                    <strong>DrinkID</strong>
                </span>
                <span >
                    <strong>ProductID</strong>
                </span>
                <span >
                    <strong>Name</strong>
                </span>
                <span >
                    <strong>Type</strong>
                </span>
                <span >
                    <strong>Quantity</strong>
                </span>
            </div>

            <div >
                <div  *ngFor="let drink of index">
                    <span >{{drink.id}}</span>
                    <span >{{drink.product.id}}</span>
                    <span >{{drink.name}}</span>
                    <span >{{drink.type}}</span>
                    <span >{{drink.product.quantity}}</span>
                    <div >
                        <button  type="submit" (ngSubmit)="deleteItem(drink)">DELETE</button>
                    </div>
                </div>
            </div>

        </div>
    </div>
</body>

Thanks in advance

CodePudding user response：

You're using the ngSubmit event when you should be using click. ngSubmit is for forms and what to do when they are submitted.

Try

<button type="submit" (click)="deleteItem(drink)">DELETE</button>