Angular数据控制台可见但应用无法渲染的问题求助

问题概述 #

后端返回的数据可在控制台正常打印，但Angular组件界面无法渲染对应数据，尝试添加*ngIf判断数据存在性后问题仍未解决。

相关代码 #

原始组件HTML #

<h4>Details for Student: {{newStudent?.jmbag}}</h4>
<hr>
<span>JMBAG: </span>{{newStudent?.jmbag}}<br>
<span>ECTS: </span>{{newStudent?.ects}}
<div *ngIf="student?.pay">Tuition should be paid.</div>
<hr>
<div class="row">
  <div *ngFor="let predmet of predmeti">
    <div>
      <a routerLink="/detailsPredmeti/{{newStudent?.jmbag}}">
        <span>{{predmet.naziv}} </span>
        <span>{{predmet.ects}} </span>
      </a>
      <span> - </span>
    </div>
  </div>
</div>
<hr>
<a routerLink="/students"><h5>Povratak</h5></a>

组件TS代码 #

import { Component, OnInit } from '@angular/core';
import { Student } from '../student';
import { StudentService } from '../student.service';
import { StudentDTO } from '../studentDTO';
import {PredmetiService} from "../predmeti.service";
import { ActivatedRoute } from '@angular/router';
import { Predmet } from '../predmet';

@Component({
  selector: 'app-student-predmeti',
  templateUrl: './student-predmeti.component.html',
  styleUrls: ['./student-predmeti.component.css']
})
export class StudentPredmetiComponent implements OnInit {

  student: Student;
  newStudent: StudentDTO;
  predmeti: Predmet[];
  constructor(
    private studentService: StudentService,
    private predmetiService: PredmetiService,
    private route: ActivatedRoute
  ) { }

  ngOnInit(): void {
    this.route.paramMap.subscribe(() => {
      this.handleStudentDetails();
    })
  }

  handleStudentDetails() {
    const theStudentJmbag: string = this.route.snapshot.paramMap.get('jmbag')!;

    this.studentService.getStudentByJmbag(theStudentJmbag).subscribe(
      data => {
        this.newStudent = data;
        console.log('Student:', this.newStudent);
      }
    );

    this.predmetiService.getCoursesByStudentJmbag(theStudentJmbag).subscribe(
      data => {
        this.predmeti = data;
        console.log('Predmeti:', this.predmeti);
      }
    );
  }
}

修改后的HTML（添加*ngIf后） #

<h4>Details for Student: {{newStudent?.jmbag}}</h4>
<hr>
<span>JMBAG: </span>{{newStudent?.jmbag}}<br>
<span>ECTS: </span>{{newStudent?.ects}}
<div *ngIf="student?.pay">Tuition should be paid.</div>
<hr>
<h5>Predmeti:</h5>
<div class="row">
  <table *ngIf="predmeti">
    <thead>
      <tr>
        <th>Naziv</th>
        <th>ECTS</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let predmet of predmeti">
        <td>{{ predmet.naziv }}</td>
        <td>{{ predmet.ects }}</td>
      </tr>
    </tbody>
  </table>
</div>
<hr>
<a routerLink="/students"><h5>Povratak</h5></a>

排查与解决步骤 #

1. 修复未赋值变量问题
   代码中student变量从未被赋值，导致<div *ngIf="student?.pay">永远无法显示。若StudentDTO包含pay字段，将判断条件改为newStudent?.pay；若需使用Student类型变量，在获取学生数据的订阅中添加赋值：

   this.studentService.getStudentByJmbag(theStudentJmbag).subscribe(
     data => {
       this.newStudent = data;
       this.student = data; // 若StudentDTO与Student结构兼容
       console.log('Student:', this.newStudent);
     }
   );
   

2. 初始化数组变量
   给predmeti初始化为空数组，避免初始undefined导致的渲染异常，同时保证*ngFor能正常监听数组变化：

   predmeti: Predmet[] = [];
   

3. 校验数据结构一致性
   确认后端返回的predmeti数据字段与Predmet接口完全匹配（注意大小写敏感），比如naziv和ects字段是否存在且类型正确。

4. 优化数据判断逻辑
   可将表格的*ngIf改为判断数组长度，确保有数据时才渲染：

   <table *ngIf="predmeti.length > 0">
   

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