The issue with the
observable$ | async; else loading; let xBelow is the code snippet that I utilized:
// TypeScript code snippet
export class CourseComponent implements OnInit {
course: Course;
sessions: Session[] = [];
sessionssubject$ = new Subject();
sessions$ = this.sessionssubject$.asObservable();
tasks: Task[] = [];
taskssubject$ = new Subject();
tasks$ = this.taskssubject$.asObservable();
constructor(
protected courseService: CoursesService,
protected taskService: TasksService,
protected sessionService: SessionsService) { }
ngOnInit() {
this.courseService.get(id).subscribe(
data => {
this.course = data;
this.sessionService.getByCourseId(this.course.id).subscribe(
data => {
data.sort((a, b) => a.startDate < b.startDate ? -1 : 1);
this.sessions = data;
this.sessionssubject$.next(this.sessions)
}
);
this.taskService.getByCourseId(this.course.id).subscribe(
data => {
this.tasks = data;
this.taskssubject$.next(this.tasks);
}
);
}
);
}
And here is an excerpt from the HTML file used:
// HTML code snippet
<nb-card class="left-margin-10">
<nb-card-header>
Sessions
<button *ngIf="user.id == courseOwner.id" button nbButton status="success" class="float-right" (click)="open_session_modal(sessionDialog)">Add session</button>
</nb-card-header>
<nb-card-body>
// Remaining HTML code...
</nb-card-body>
</nb-card>
I have thoroughly checked the console, which consistently displays no errors. The database contains the necessary data, and the API remains operational.**UPDATE:** Though I have implemented the solution proposed in this answer, the issue persists, albeit less frequently than before.