Data is not displayed on page

Question

I am running into problem with display my data on page after a post request to my API. I have never ran into this problem before and I have no idea what causes it.This is just some easiest implementation but it just not working.

My Service:

 getCourseInfo(data): Observable<any> {
    const id = parseInt(data);
    const url = `${this.baseUrl}/TblUnimeCourses/getCourseInfo/` + id;
    return this.http.get(url);
 }

My resolver for the page:

  constructor(private courseService: CourseService) {}

  resolve(route: ActivatedRouteSnapshot) {
      return this.courseService.getCourseInfo(route.paramMap.get("id"));
  }

My Component:

  export class IntroComponent implements OnInit {
    courseInfo: CourseInfo;
    constructor(private route: ActivatedRoute) {}

    ngOnInit() {
       this.courseInfo = this.route.snapshot.data.data;
       console.log(this.courseInfo);
    }
  }

  export interface CourseInfo {
     courseTitle: any;
     coursePrice: number;
  }

My console log:

  courseCode: "IT101"
  coursePrice: 300
  courseTitle: "Information Technology"
  description: "Monash University Foundation Course"
  introduction: "Introductory course"

My template: ( sorry I pasted wrong code here while i was trying other approach, then I double checked my own code, it is using courseInfo this object for display. so the problem is still not fixed yet. Also the question mark I added after this object doesn't solve this problem.)

  <div class="intro-title">
     <h2>{{ courseInfo?.courseTitle }}</h2>
  </div>

However, the courseTitle is never displayed even I have got my data back and I have console log it I can see them in the development tool.

Thanks guys. I lately found out I was adding this function inside a different component with similar name. Just remind me again some little detail could fuck me good time...... — Johnathan Li
– Johnathan Li, Commented Aug 1, 2019 at 5:55

Tuhin Das · Accepted Answer · 2019-08-01 05:20:41Z

1

You are populating this.courseInfo while you are using courseDetail on the template which is a @input to the component. So either you use this.courseInfo or set data in courseDetail which is then given to your component as @input.

answered Aug 1, 2019 at 5:20

Tuhin Das

4992 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Johnathan Li Over a year ago

I have remove the @input and only use the courseInfo in the component, but the problem still remain. It is not displayed on the page?

Johnathan Li Over a year ago

Would it be cache problem?

Tuhin Das Over a year ago

I dont think its a cache issue. moreover you can try assigning the initially courseInfo as null and add a *ngIf on parent div for courseInfo to be not null this should work

Prashant Pimpale · Accepted Answer · 2019-08-01 05:25:40Z

0

I think it should be:

<div class="intro-title">
   <h2> {{ courseInfo?.courseTitle }} </h2>
</div>

answered Aug 1, 2019 at 5:25

Prashant Pimpale

10.7k10 gold badges51 silver badges88 bronze badges

Comments

Eftychios Karagiorgis · Accepted Answer · 2019-08-01 05:21:50Z

0

I think the courseDetail input is undefined. You should try using courseInfo?.courseTitle instead.

answered Aug 1, 2019 at 5:21

Eftychios Karagiorgis

486 bronze badges

1 Comment

Johnathan Li Over a year ago

sorry that was a mis-type in the question. I have correct my question but the problem is still remain.

Collectives™ on Stack Overflow

Data is not displayed on page

3 Answers 3

3 Comments

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Related