如何在嵌套的Json对象中获取循环

时间:2018-07-10 15:08:02

标签: angular typescript

我得到了一个包含Adress的接口,该地址是一个对象,如何通过* ngFor获得其值?


export  interface User {
  id: number;
  name: string;
  username: string;
  email: string;
  address: Address;
}


export interface Address {
    street: string;
    suite: string;
    city: string;
    zipcode: string;
  }

<div *ngFor="let oneuser of table">
  <p>{{oneuser.id}}</p>
  <p>{{oneuser.name}}</p>
  <p>{{oneuser.username}}</p>
  <p>{{oneuser.email}}</p>
  <hr>
</div>

1 个答案:

答案 0 :(得分:7)

喜欢

<div *ngFor="let oneuser of table">
<p>{{oneuser.id}}</p>
<p>{{oneuser.name}}</p>
<p>{{oneuser.username}}</p>
<p>{{oneuser.email}}</p>
<hr>
<p>{{oneuser.address.street}}</p>
<p>{{oneuser.address.suite}}</p>
<p>{{oneuser.address.city}}</p>
<p>{{oneuser.address.zipcode}}</p>

</div>

已更新

如果addressundefined,这将引发一个常见的JavaScript错误,无法读取未定义的街道来解决此问题,您可以使用安全的导航运算符(?.

<div *ngFor="let oneuser of table">
<p>{{oneuser.id}}</p>
<p>{{oneuser.name}}</p>
<p>{{oneuser.username}}</p>
<p>{{oneuser.email}}</p>
<hr>
<p>{{oneuser.address?.street}}</p>
<p>{{oneuser.address?.suite}}</p>
<p>{{oneuser.address?.city}}</p>
<p>{{oneuser.address?.zipcode}}</p>

</div>