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

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

如何从中访问“地址”属性，如“街道”和“城市”

---

谢谢

假设您想要访问数组的第一个对象。API响应被放置在响应变量中：

const response = data //the data received from the API
const address = response[0].address;
const street = address.street;
const city = address.city

---

假设您想要访问数组的第一个对象。API响应被放置在响应变量中：

const response = data //the data received from the API
const address = response[0].address;
const street = address.street;
const city = address.city

---

您可以使用以下代码访问它们。然后说

propertiesList

作为响应

...
 const addressList = this.propertiesList.map(prop -> prop.address ? 
                      { 'street' : prop.address.street, 'city' : prop.address.city } : null );
...

您可以通过索引来访问它们

const street = addressList[0].street;
const city = addressList[0].city;

---

您可以使用以下代码访问它们。然后说

propertiesList

作为响应

...
 const addressList = this.propertiesList.map(prop -> prop.address ? 
                      { 'street' : prop.address.street, 'city' : prop.address.city } : null );
...

您可以通过索引来访问它们

const street = addressList[0].street;
const city = addressList[0].city;

---

查看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);

this.\u http.get（this.apirl）；

---

现在，您可以使用点运算符（.）访问用户对象内的嵌套对象。

看到您的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);

this.\u http.get（this.apirl）；

---

现在，您可以使用点运算符（.）访问用户对象中的嵌套对象。

非常感谢！这不是下载了所有的数据吗。有没有一种方法可以使用一个类只获取几个属性？如果你的api返回了所有的数据，那么你什么都做不了，如果你想要更少的数据，你就必须改变api！这不是下载了所有的数据吗。有没有一种方法可以使用一个类只获取几个属性？如果你的api返回了所有的数据，那么你什么都做不了，如果你想要更少的数据，你必须更改api