我得到了一个包含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>
答案 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>
已更新
如果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>