如何创建一个好的删除方法来使用 Angular 从表中删除一条记录？

Question

我试图创建一个通过 id 删除员工的方法，所以我创建了多个逻辑，除了这个方法之外，所有这些逻辑都在 VS 代码中给了我一个错误。 当我单击删除按钮时，它在控制台上出现错误。 我不知道如何解决我需要帮助:

员工列表.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);
        }
      });
    }
  }
}

员工列表.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> 

员工.service.ts

//emp delete

deleteEmployee(employeeId:number | null): Observable<void> {
  const url = `${this.API_URL}/${employeeId}`;
  return this.http.delete<void>(url);}

控制台出现错误消息

intelliJ 中的端点

   @DeleteMapping("/employees/{id}")
    @ResponseStatus(HttpStatus.NO_CONTENT)
    public void deleteEmployee(@PathVariable Integer id){
        EmployeeService.deleteEmployee(id);
    }

Answer 1

您的API返回状态404，这意味着该资源不存在。所以 api

http://localhost:8080/api/6

不存在。

根据您的注释

@DeleteMapping("/employees/{id}")

，您的API应该是

http://localhost:8080/employees/6

，或者如果您在后端控制器上有另一个注释

http://localhost:8080/api/employees/6

，则可能是

@RequestMapping("/api")