CODEWITHSUNDEEP
javascriptangulartypescript
NiceTobeBottleInfinity
NiceTobeBottleInfinity

Reputation: 71

Data from backend not visible in html page

I have angular 8 application. And I have a service for retrieving courses from a api call.

So the service method looks like this:

  loadCourseById(courseId: number) {
       return this.http.get<Course>(`/api/courses/${courseId}`)
            .pipe(
              shareReplay()
            );
    }

and the component looks like this:

@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);

  }
}

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

So I have checked the api call. And I see in the console.log that I get the correct data back.

But in the html page it is empty so no content is visible.

So what I have to change?

Thank you

Upvotes: 0

Views: 279

Answers (1)

wissem chiha
wissem chiha

Reputation: 60

You're miss a small change in your code

remove this pipe from your service

.pipe(shareReplay());

and for your template there are 2 possible change to proceed:

1 - remove () inside your ngIf statement => *ngIf="course$ | async as course"

<h2>{{course.description}}</h2>
<img class="course-thumbnail" [src]="course.iconUrl">
....

2 - your ngIf statement will look like this => *ngIf="course$ | async"

<h2>{{(course$ | async)?.description}}</h2>
<img class="course-thumbnail" [src]="(course$ | async)?.iconUrl">
....

I hope that is helpfull

Upvotes: 1

Related Questions