Angular return httpclient response that object with sub object [object object]

Question

cmCm.png

export class HttTestComponent implements OnInit {


  student:User;
  grade:Grade;

  constructor(private service:HttTestserviceService) { }

 


  ngOnInit() {
    this.service.getStudentDetails().subscribe(response=>this.student=response);
  }

}

export class HttTestserviceService {

  private usersUrl: string;
 
  constructor(private http: HttpClient) {
    this.usersUrl = 'http://localhost:....';
  }

 
  getStudentDetails() : Observable<User>{
    return this.http.get<User>(this.usersUrl+"/getStudentDetails/");
  }

import  {Grade} from "../app/grade"

export interface User {
    studentId: string;
    studentName: string;
    dob: string;
    listGrade:Grade;
}

export interface Grade {
    gradeId:string;
    gradeName:string;
    gradePoint:number;
}

Just leaning angular for a few days. I was not able to get listGrade of the object to display properly. As shown in the image I got [object object]. Does anyone know how to solve this?

Answer 1

I assume that you just bound all student properties into view and listGrade prop is a list of objects type and angular doesn't know how to display it. Just try @ngFor directive like this:

<div>{{ student.studentId }}</div>
<div>{{ student.studentName }}</div>
<div>{{ student.dob }}</div>
<div *ngFor="let grade of listGrade">
    <div>{{ grade.gradeID }}</div>
    <div>{{ grade.gradeName }}</div>
    <div>{{ grade.gradePoint }}</div>
</div>