Can't display data from database to html

I'm working on a project involving some quizzes loaded from a database. My problem is that I don't know why, but I can't load the questions and the answers on my html page.

I tried to debug the Typescript, but it works, the backend loads the data correctly (tested with Postman and everything's fine), but when I go to the page, I can't get them visually and not even in the console (I debugged the http request and the Typescript component, but found nothing, all seems to work).

Here there are the model, service, HttpRequest, the Typescript of the page and the html.

If something else is needed let me know!



import { ServerTestingModule } from "@angular/platform-server/testing";

export interface MedicineQuizModel{
subject : string,
question: string,
first_answer: string,
second_answer: string,
third_answer: string,
correct_answer: string
}


import { Injectable } from "@angular/core";
import { HttpClient, HttpHeaders } from "@angular/common/http";
import { Observable } from "rxjs";
import { MedicineQuizModel } from "../model/medicine-quiz.model"

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

private medicineUrl = 'http://localhost:8080/medicine';
constructor(private http: HttpClient) {

}
getQuestionBySubject(subject: string) : Observable<MedicineQuizModel[]>{
//console.log("funziona!!");
return this.http.get<MedicineQuizModel[]>(`${this.medicineUrl}/${subject}`);

}
}


import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, RouterModule } from '@angular/router';
import { MedicineQuizService } from '../service/medicine-quiz.service';
import { MedicineQuizModel } from '../model/medicine-quiz.model';
import { CommonModule } from '@angular/common';

@Component({
selector: 'app-medicine-quiz',
templateUrl: './medicine-quiz.component.html',
styleUrls: ['./medicine-quiz.component.css'],
imports: [CommonModule],
standalone: true
})
export class MedicineQuizComponent implements OnInit {

subject: string = '';
questions: MedicineQuizModel[] = [];

constructor(
private route: ActivatedRoute,
private medicineQuizService: MedicineQuizService
) {}

ngOnInit(): void {
// Recupera il subject dai parametri di routing
this.subject = this.route.snapshot.paramMap.get('subject') || '';

this.medicineQuizService.getQuestionBySubject(this.subject).subscribe({
next: (data: MedicineQuizModel[]) => {
this.questions = data;
//console.log("Funziona!!");
},
error: (error) => {
console.error('Errore nel recupero delle domande:', error);
}
});
}
}


<section id="medicine-quiz">
<div *ngFor="let question of questions" class="quiz-item">
<h3 class="quiz-question">{{ question.question }}</h3>
<ul class="quiz-answers">
<li>{{ question.first_answer }}</li>
<li>{{ question.second_answer }}</li>
<li>{{ question.third_answer }}</li>
<li>{{ question.correct_answer }}</li>
</ul>
</div>
</section>

Continue reading...