时间戳

首页 > 解决方案 > 如何使用 Angular 从 API 访问嵌套属性

angular - 如何使用 Angular 从 API 访问嵌套属性

问题描述

我正在使用 Angular 从 API 获取数据。我一直在关注这个youtube 视频，但没有演示访问嵌套属性。

您将如何从https://jsonplaceholder.typicode.com/users访问“地址”属性，例如“街道”和“城市”

谢谢！

标签： angularapinestedfrontend

解决方案

看到你的API，你的数据结构有嵌套对象，而你参考的教程只给出了一个普通对象的例子。

上述答案还建议了访问对象中嵌套属性的正确方法，但在这种情况下，我建议您以正确的方式构建对象，以便 Angular 自动正确映射嵌套对象。

像这样的东西。

export class Location{
    public lat: string;
    public lng: string;
}
  export class Company{
      public name: string;
      public catchPhrase: string;
      public bs: string;
  }
  
  export class Address{
    public street: string;
    public suite: string;
    public city: string;
    public zipcode: string;
    public geo: Location;
}
export class User{
    public id: number;
    public name: string;
    public username: string;
    public email: string;
    public address: Address;
    public phone: string;
    public website: string;
    public company: Company;
}

这样，当您调用 http get 服务时，您会以正确的嵌套格式获取记录，以便以后访问。例如

this._http.get<User[]>(this.apiUrl);

现在您可以使用点运算符 (.) 访问 User 对象内的嵌套对象。

推荐阅读