Angular，数据显示在控制台但不在应用程序中

So I am fetching data from the backend and it works since I can see it in the console

但正如您所看到的，它识别出数据在这里，但它似乎在渲染方面存在一些问题.以下是相关代码

这是组件的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);
      }
    );
  }



}

我try 添加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>

但还是没有运气