Angular无法展示Spring-Boot返回的表格数据，请求协助排查

控制台已成功获取数据，但页面表格无内容，问题出在以下几点：

1. NgFor指令位置错误 #

你将*ngFor指令应用在了<tbody>标签上，这会为每一条数据生成一个独立的<tbody>节点，不符合HTML表格的标准结构（一个<tbody>应包含所有数据行），导致表格无法正确渲染数据。

修复方法：将*ngFor移到<tr>标签上，让每个数据条目对应一个表格行：

<tbody>
  <tr *ngFor="let question of questions">
    <td>{{question.QuestionId}}</td>
    <td>{{question.Question}}</td>
    <td>{{question.OptionsA}}</td>
    <td>{{question.OptionsB}}</td>
    <td>{{question.OptionsC}}</td>
    <td>{{question.OptionsD}}</td>
  </tr>     
</tbody>

2. 未处理数据初始状态的空值 #

questions变量初始值为undefined，Angular模板中直接对undefined使用*ngFor会触发隐性错误，阻止数据渲染。

修复方法：使用*ngIf指令在数据加载完成前隐藏表格，避免空值渲染问题：

<table class="table table-striped" *ngIf="questions">
  <!-- 表格内容 -->
</table>

或者在*ngFor中使用空数组兜底：

<tr *ngFor="let question of questions || []">

3. 字段名大小写不匹配（需验证） #

检查Spring Boot返回的JSON字段名与Angular模型Quiz1中的字段名是否完全一致。例如：

• 如果后端返回的是小驼峰格式（如questionId、question），而前端模型使用大驼峰（QuestionId、Question），需要确保HttpClient的序列化配置支持自动转换，或者调整模型字段名与后端一致。

修改后的完整component.html示例 #

<p>quiz1 works!</p>
<table class="table table-striped" *ngIf="questions">
    <thead>
      <tr>  
        <th>Question No</th>
        <th>Question</th>
        <th>Option A</th>
        <th>Option B</th>
        <th>Option C</th>
        <th>Option D</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let question of questions">
        <td>{{question.QuestionId}}</td>
        <td>{{question.Question}}</td>
        <td>{{question.OptionsA}}</td>
        <td>{{question.OptionsB}}</td>
        <td>{{question.OptionsC}}</td>
        <td>{{question.OptionsD}}</td>
      </tr>     
    </tbody>
  </table>

内容的提问来源于stack exchange，提问作者Salahuddin Shayan