Angular与SpringBoot联动：数据已传但表格不显示问题求助

后端运行正常，数据已传输至前端，但页面表格无内容，首次使用SpringBoot搭配Angular，无法定位错误。

控制台输出（数据已接收） #

相关代码 #

HTML代码 #

<h1>Consulter Agent</h1>
<table class="styled-table">
    <thead>
        <tr>
            <th>Matricule</th>
            <th>Nom</th>
            <th>Prénom</th>
            <th>Role</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let agent of agents">
            <td>{{agent.mat}}</td>
            <td>{{agent.FName}}</td>
            <td>{{agent.LName}}</td>
            <td>{{agent.role}}</td>
        </tr>
    </tbody>
</table>

组件代码 #

import { Component, OnInit } from '@angular/core';
import { AgentServiceService } from '../agent-service.service';
import { Agent } from '../Agent';

@Component({
  selector: 'app-consulter-agent',
  templateUrl: './consulter-agent.component.html',
  styleUrls: ['./consulter-agent.component.css']
})
export class ConsulterAgentComponent implements OnInit{
  agents: Agent[]=[];

  constructor(private agentService: AgentServiceService) { }

  ngOnInit(): void {
    console.log('Getting all agents...');
  this.agentService.getAllAgent()
    .subscribe(agents => {
      console.log('Received agents:', agents);
      this.agents = agents;
    });
  }

  getAgent(): void {
    this.agentService.getAllAgent()
      .subscribe(agents => this.agents = agents);
  }
}

服务代码 #

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { Agent } from './Agent';


@Injectable({
  providedIn: 'root'
})
export class AgentServiceService {

  private baseUrl = 'http://localhost:9090/agents';

  constructor(private http: HttpClient) { }

  getAllAgent(): Observable<Agent[]> {
    return this.http.get<Agent[]>(`${this.baseUrl}`);
  }
}

实体类代码 #

export class Agent {
    mat: number | undefined;
    FName: string | undefined;
    LName: string | undefined;
    
    role:Role | undefined;
  }
  export class Role{
    roleName:String | undefined;
    roleDescription:String | undefined;
  }

排查与解决方案 #

1. 字段名不匹配（最可能原因）
   检查后端返回的JSON字段名与Angular实体类属性是否一致：

   • Java后端实体类通常采用小驼峰命名（如matricule、fName、lName），而前端Agent类用了mat、FName、LName，字段名不匹配会导致数据无法正确映射到agents数组的属性中，*ngFor遍历的数组元素属性为空，表格自然无内容。
   • 解决：对照控制台Received agents输出的JSON结构，修改前端Agent类的属性名，确保与后端返回字段完全一致（包括大小写）。

2. Role字段渲染优化
   HTML中直接渲染{{agent.role}}会显示[object Object]，若想显示具体角色名称，需修改为{{agent.role?.roleName}}（使用可选链?.避免role为undefined时报错）。

3. 确认HttpClientModule导入
   确保HttpClientModule已在AppModule的imports数组中导入，否则HttpClient无法正常工作（虽然你已获取到数据，但仍需确认）。

内容的提问来源于stack exchange，提问作者Ben ayed Hela