Search code examples
angularconsolerendering

Angular, data is shown in the console but not in the App

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

But as you can see, it recognizes that the data is here but it's like there's some problem with rendering. Here's the relevant code

This is HTML part of the component

<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>

And this is 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);
      }
    );
  }



}

I tried add ngif, so that it looks like this

<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>

But still no luck

Solution

  • Your predmet object has name and numberOfECTS keyes, and not naziv and ects that you're trying to access.