Angular端员工ID未定义，更新/删除员工操作失败求助

我开发了一套Spring Boot后端+Angular前端的员工管理系统，用Postman测试API时所有CRUD操作都能正常执行，但在Angular前端里遇到两个问题：

• 获取员工数据时无法拿到ID字段
• 员工创建功能正常，但执行更新和删除操作时，控制台提示"Id is UNDEFINED"报错

相关代码 #

EmployeeService #

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Employee } from '../model/employee';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
@Injectable({
  providedIn: 'root'
})
export class EmployeeService {
  private baseUrl = "http://localhost:8080/api/v1/employees";
  employees: Employee[] | undefined;
  constructor(private http: HttpClient) {}

  addEmployee(emp: Employee): Observable<Employee> {
    return this.http.post<Employee>(this.baseUrl, emp)
      .pipe(
        catchError(this.handleError)
      );
  }

  getAllEmployees(): Observable<Employee[]> {
    return this.http.get<Employee[]>(this.baseUrl)
      .pipe(
        catchError(this.handleError)
      );
      console.log(this.employees);
  }

  updateEmployee(emp: Employee): Observable<Employee> {
    const url = `${this.baseUrl}/${emp.id}`;
    return this.http.put<Employee>(url, emp)
      .pipe(
        catchError(this.handleError)
      );
  }

  deleteEmployee(emp: Employee): Observable<Employee> {
    const url = `${this.baseUrl}/${emp.id}`;
    return this.http.delete<Employee>(url)
      .pipe(
        catchError(this.handleError)
      );
  }

  private handleError(error: any) {
    console.error('API Error: ', error);
    return throwError(error);
  }
}

DashboardComponent #

import { Component, OnInit } from '@angular/core';
import { Employee } from '../../model/employee';
import { FormBuilder, FormGroup } from '@angular/forms';
import { EmployeeService } from '../../service/employee.service';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {
  empDetail !: FormGroup;
  empObj : Employee = new Employee();
  empList : Employee[] = [];

  constructor(private formBuilder : FormBuilder, private empService : EmployeeService) { }

  ngOnInit(): void {

    this.getAllEmployee();

    this.empDetail = this.formBuilder.group({
      id : [''],
      firstName : [''],
      lastName : [''],
      emailId : ['']
    });    
    this.getAllEmployee();
  }

  addEmployee() {
    console.log(this.empDetail);
    this.empObj.id = this.empDetail.value.id;
    this.empObj.firstName = this.empDetail.value.firstName;
    this.empObj.lastName = this.empDetail.value.lastName;
    this.empObj.emailId = this.empDetail.value.emailId;

    this.empService.addEmployee(this.empObj).subscribe({
     next: (res)=>{
        console.log(res);
        this.getAllEmployee();
    },error: err=>{
        console.log(err);
    }});

  }

  getAllEmployee() {
    this.empService.getAllEmployees().subscribe({
      next:(res)=>{
        this.empList = res;
    },error:err=>{
      console.log("error while fetching data.")
    }});
  }

  editEmployee(employee: Employee) {
    if (!employee|| !employee.id) {
      console.error('Employee data or ID is undefined');
      return;
    }
  
    this.empDetail.setValue({
      id: employee.id || '',
      firstName: employee.firstName || '',
      lastName: employee.lastName || '',
      emailId: employee.emailId || ''
    });
  }
  updateEmployee() {
    if (!this.empObj || !this.empObj.id) {
      console.error('Employee data or ID is undefined');
      return;
    }
    this.empObj.id = this.empDetail.value.id;
    this.empObj.firstName = this.empDetail.value.firstName;
    this.empObj.lastName = this.empDetail.value.lastName;
    this.empObj.emailId = this.empDetail.value.emailId;

    this.empService.updateEmployee(this.empObj).subscribe({
      next:(res)=>{
      console.log(res);
      this.getAllEmployee();
    },error: err=>{
      console.log(err);
    }})

  }

  deleteEmployee(emp : Employee) {
    if (!emp || !emp.id) {
      console.error('Employee data or ID is undefined');
      return;
    }
  
    this.empService.deleteEmployee(emp).subscribe({
      next: (res) => {
        console.log(res);
        alert('Employee deleted successfully');
        this.getAllEmployee();
      },
      error: (err) => {
        console.log(err);
      }
    });
  }

}

排查情况 #

我已经添加了验证逻辑排查问题，推测是Angular端存在阻碍ID字段获取的问题，希望得到解决帮助。

内容的提问来源于stack exchange，提问作者swati kadu