I am currently working on an Angular 8 application where I have a service dedicated to fetching courses from an API endpoint.
The service method that I'm using looks like this:
loadCourseById(courseId: number) {
return this.http.get<Course>(`/api/courses/${courseId}`)
.pipe(
shareReplay()
);
}
Here is a snippet of the component code:
@Component({
selector: 'course',
templateUrl: './course.component.html',
styleUrls: ['./course.component.css']
})
export class CourseComponent implements OnInit {
course$: Observable<Course>;
lessons$: Observable<Lesson[]>;
constructor(private route: ActivatedRoute, private courseService: CoursesService) {}
ngOnInit() {
const courseId = parseInt(this.route.snapshot.paramMap.get('courseId'));
this.course$ = this.courseService.loadCourseById(courseId);
console.log(courseId);
}
}
As for the template, it looks like this:
<ng-container *ngIf = "(course$ | async) as course">
<div class="course">
<h2>{{course?.description}}</h2>
<img class="course-thumbnail" [src]="course?.iconUrl">
<table class="lessons-table mat-elevation-z7">
<thead>
<th>#</th>
<th>Description</th>
<th>Duration</th>
</thead>
</table>
</div>
</ng-container>
I have verified that the API call is returning the correct data by checking the console log. However, the HTML page is not displaying any content even though the data is being retrieved properly.
Could you please assist me in figuring out what adjustments need to be made?
Thank you!