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;
}

刚靠angular几天。我无法让对象的 listGrade 正确显示。如图所示，我得到了 [object object]。有谁知道如何解决这个问题？

Answer 1

@learnisgood，listGrade 是一个数组 - 例如你放了一个独特的元素-我不知道你的错误是不是在界面中需要写

导出界面用户{ 学生编号：字符串； 学生姓名：字符串； DOB：字符串； listGrade:Grade[]; //<--表示这是一个数组 } 如果是一个数组，你需要使用 *ngFor 来显示它，例如

<div *ngFor="let grade of student.listGrade">
{{grade.gradeName}}
</div>

或者如果您确定总是收到一个包含唯一元素的数组，您可以使用类似

  subscribe(response=>this.student=
     {...response,
      listGrade:response.listGrade[0]
      })

注意：我使用 spreadOperator 来复制对象

NOTE2: 有时在 .html write for check

中使用 util

<pre>
{{student|json}}
</pre>

Answer 2

我假设您只是将所有 student 属性绑定到视图中，并且 listGrade prop 是一个对象类型列表并且 angular 不知道如何显示它。只需像这样尝试 @ngFor 指令：

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