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

本文介绍了如何在嵌套的Json对象中获取循环的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

I got this interface that contain Adress which is an object , how to get its value through *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>

推荐答案

像这样

<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错误，无法读取未定义的街道以解决此问题，您可以使用安全的导航运算符(?.)

If address is undefined this will throw a common javascript error can't read street of undefined to solve this you can use safe navigation operator (?.)

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

这篇关于如何在嵌套的Json对象中获取循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！