Incorporated a function called 'getQuestionsWithInterviewId' to populate my 'Questions' string, but it appears empty when I attempt to call it within the ngOnInit and ngAfterContentInit methods and log the result in the console.
import { Component, OnInit } from '@angular/core';
import { QuestionService } from '../_services/question.service';
import { Question } from '../_models/model';
@Component({
selector: 'app-interview',
templateUrl: './interview.component.html'
})
export class InterviewComponent implements OnInit {
questions: Question[]=[];
constructor(private questionService: QuestionService) {
}
ngOnInit(): void {
}
ngAfterContentInit() {
this.getQuestionsWithInterviewId(1);
console.log(this.questions);
$(".tab-wizard").steps({
headerTag: "h6",
bodyTag: "section",
transitionEffect: "fade",
titleTemplate: '<span class="step">#index#</span> #title#',
labels: {
finish: "end"
},
onFinished: function (event, currentIndex) {
alert("end");
}
});
}
getQuestionsWithInterviewId(interviewId: number) {
this.questionService.getQuestionsWithInterviewId(interviewId).subscribe(a => {
this.questions = a;
},
error => {
console.log(error);
});
}
}
https://i.sstatic.net/TmTMB.png
However, on the component.html page, when I utilize the 'questions' array, the results are visible.
https://i.sstatic.net/FIdny.png
https://i.sstatic.net/RuqUR.png
If I execute the console.log operation within the 'getQuestionsWithInterviewId' function, the results are displayed correctly.
getQuestionsWithInterviewId(interviewId: number) {
this.questionService.getQuestionsWithInterviewId(interviewId).subscribe(a => {
this.questions = a;
console.log(this.questions);
},
error => {
console.log(error);
});
}
https://i.sstatic.net/emAiZ.png
question.service.ts page;
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Question } from '../_models/model';
@Injectable({
providedIn: 'root'
})
export class QuestionService {
baseUrl: string = 'https://localhost:44388/api/questions/';
constructor(private http: HttpClient) {
}
getQuestionsWithInterviewId(interviewId: number): Observable<Question[]> {
return this.http.get<Question[]>(this.baseUrl +
"GetQuestionsWithInterviewId/" + interviewId);
}
}