Whenever I attempt to delete data from the server by clicking the delete button that triggers the delete function, I encounter a 500 (Internal Server Error). How can I pass the index to successfully delete the todo?
> import { Component, OnInit, Input } from '@angular/core';
> import { Router } from '@angular/router';
> import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
> import { Validators } from '@angular/forms';
> import { HttpService } from '../http.service';
>
>
> @Component({
> selector: 'todo-app',
> templateUrl: './todo-app.component.html',
> styleUrls: ['./todo-app.component.css']
> })
> export class TodoAppComponent implements OnInit {
>
> myForm: FormGroup;
> todoitems = [];
> todolist;
> submitted = false;
> name;
>
> constructor(private router: Router, private formBuilder: FormBuilder, private httpService: HttpService ) {
> }
>
> ngOnInit() {
> this.myForm = this.formBuilder.group({
> todoitems : [this.todolist, Validators.compose([Validators.required, Validators.minLength(3)])]
>
> });
>
> this.httpService.gettodo().subscribe(
> (data:any[]) => {
> this.todoitems = data;
> console.log(this.name);
> }
> );
>
> }
>
>
>
>
>
>
> addTodo(todolist) {
>
> if (this.myForm.invalid) {
> this.submitted = true;
>
> }
> if (this.myForm.valid) {
> var body = { name: this.todolist }
> this.httpService.addTodoo(body).subscribe(
> (data:any) => {
> this.todoitems = data;
> console.log(data);
> }
> )
>
> this.myForm.reset();
> this.submitted = false;
> console.log('Form Submitted!');
> console.log(this.todoitems);
>
> }
>
> }
>
> deletetodo(id : number) {
> this.httpService.deleteTodo(id).subscribe()
>
> }
>
>
>
> }
>
>
> //http.service delete fun
> deleteTodo(id){
> return this.http.delete('http://localhost:3000/api/names/=${id}') }
>
>
>
> <form [formGroup]="myForm">
>
> <div>
>
> <input formControlName="todoitems" [(ngModel)]="todolist" name="todoitems">
> <button type="submit" (click)="addTodo(todolist)">Add</button>
> <div>
> <div *ngIf="submitted && myForm.controls.todoitems.errors">
> <div *ngIf="myForm.controls.todoitems.errors.required"> please fill</div>
> <div *ngIf="myForm.controls.todoitems.errors.minlength">min 3</div>
> </div>
>
> </div>
> </div>
> <br>
> <div>
> <table style="width:50%">
> <tr *ngFor="let todoitem of todoitems; let i = index" >
>
> <td>{{ todoitem.name }}</td>
> <td>
> <button (click)="deletetodo(id)">Delete</button>
> </td>
> </tr>
>
> </table>
> </div>
>
> </form>
>