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

Question

我有这个包含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>

Answer 1

像这样

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

更新

如果address是undefined这将抛出一个常见的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>