在 Angular 中使用 httpClient 获取嵌套对象答案

【问题标题】：Get nested object with httpClient in Angular在 Angular 中使用 httpClient 获取嵌套对象
【发布时间】：2020-09-22 02:08:28
【问题描述】：

我正在尝试使用 get 请求让嵌套对象显示在模板中。问题是它显示了我的对象的主要属性，不过是嵌套对象。

export class User {
 userId: number;
 userName: string;
 password: string;
 firstName: string;
 lastName: string;
 role: number;
 inforamation: Information;
}

这是我的模型，它可以显示用户属性但不能显示信息。

getAllUsers(){
    const header = new HttpHeaders({
      'Content-Type':  'application/json'
    });
    return this.usersapiservice.getData(this.REST_API_SERVER, {headers : header});
  }



ngOnInit(){
this.getAllUsers().subscribe((data: User[]) => {
      this.users = data;
    });
}

在我的html中

{{users.firstname}} // work

{{users.information.adress}} // Does not work`

【问题讨论】：

你能在this.users = data; 行之后做console.log(this.users)，请检查对象在控制台中的样子

标签： angular api httpclient

【解决方案1】：

我看到了几个问题。在User 类中，您将其中一个属性拼写为inforamation，但在模板中，该属性被正确拼写为information。

如果你有一个Users 数组要渲染，你可以使用Angular 的*ngFor 来遍历它们，如下所示：

<div *ngFor="let user of users">
  {{user.firstName}}
  {{user.information.address}}
</div>

【讨论】：

哇，我没想到会这样。这是拼写错误的属性 "Information" 。非常感谢
没问题！很高兴这有帮助。这种错误通常记录在浏览器的控制台中。如果您使用的是 Chrome，则可以通过右键单击网页上的任意位置并单击“检查”选项，然后导航到“控制台”来打开控制台。