I've been working on creating a method to delete an employee by their ID, and I've tried various approaches in my VS Code. Unfortunately, all of them have resulted in errors except for this specific method. Whenever I click on the delete button, an error pops up on the console, and I'm not quite sure how to resolve it. Any help would be greatly appreciated:
employee-list.component.ts
import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { employee } from 'src/app/model/employee.model';
import { EmployeeService } from 'src/app/services/employee.service';
@Component({
selector: 'app-employee-list',
templateUrl: './employee-list.component.html',
styleUrls: ['./employee-list.component.css']
})
export class EmployeeListComponent implements OnInit{
employees: employee[] = [];
employeeName:string='';
employeeNumber:Number=0;
city:string="";
postalCode:string="";
state:string="";
street:string="";
constructor(private employeeService:EmployeeService,
private http:HttpClient){}
ngOnInit(): void {
//add employee array
this.GetAllEmployees();
}
GetAllEmployees():void{
this.employeeService.GetAllEmployees().subscribe({
next:(data)=>{
this.employees=data;
console.log(this.employees);
}
})
}
//DELETE METHOD:
deleteEmployee(employeeId: number): void {
if (employeeId !== null) {
this.employeeService.deleteEmployee(employeeId).subscribe({
next: () => {
this.employees = this.employees.filter((emp) => emp.employeeId !== employeeId);
},
error: (error) => {
console.log(error);
}
});
}
}
}
employee-list.component.html
<h2>Emloyee List</h2>
<table class="table-stripad" >
<thead>
<tr>
<th >Employee Name</th>
<th >Phone Number</th>
<th >Street</th>
<th >City</th>
<th >State</th>
<th >Postal Code</th>
<th>View</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let employee of employees" class="active-row">
<td>{{employee.employeeName}}</td>
<td>{{employee?.employeeNumber}}</td>
<td>{{employee.address?.city}}</td>
<td>{{employee.address?.street}}</td>
<td>{{employee.address?.state}}</td>
<td>{{employee.address?.postalCode}}</td>
<td>
<a [routerLink]="['/employees',employee.employeeId]">
<button (click)="(employee.employeeId)" class="btn" >Detalis</button></a>
</td>
<td>
<button *ngIf="employee.employeeId !== null" (click)="deleteEmployee(employee.employeeId!)" class="btn">Delete</button>
</td>
</tr>
</tbody>
</table>
employee.service.ts
//emp delete
deleteEmployee(employeeId:number | null): Observable<void> {
const url = `${this.API_URL}/${employeeId}`;
return this.http.delete<void>(url);}
Error message on the console
endpoint in intelliJ
@DeleteMapping("/employees/{id}")
@ResponseStatus(HttpStatus.NO_CONTENT)
public void deleteEmployee(@PathVariable Integer id){
EmployeeService.deleteEmployee(id);
}