ngFor用于Angular中复杂的嵌套JSON数据

Question

我有一个复杂的嵌套Json，为了访问深度以显示在视图(HTML)上，使用ngFor的代码是什么?我正在使用异步管道。我想获得经度纬度的显示值。数据是4层嵌套的，如下所示:

JSON
{
"results": [
{
location": {
"postcode": "63104",
"coordinates": {
**"latitude": "-69.8246",
"longitude": "134.8719"**
}
] }}]}
HTML
<ul *ngIf="customerObs | async as response">     
<li *ngFor="let result of response.results">
{{????}}
</li> 
</ul>
TS
customerObs = this.http.get<Response>('https://randomuser.me/api/?format=json');
constructor(private http: HttpClient) { }

Answer 1

可以嵌套赋值

<ul>
<li *ngFor="let result of response.results">
Longitude = {{ result.location.coordinates.longitude }}
<br />
Latitude = {{ result.location.coordinates.latitude }}
</li>
</ul>

Answer 2

由于JSON是嵌套的，所以我有模型接口和子接口。主界面"Result"需要导入"Location"界面，我最初错过了这一点。一旦引进，它就起作用了。加粗下图:

import { Id } from "./id";
**import { Location } from "./location";**
export interface Result {
gender: string;   
**location: Location;**
email: string;    
id: Id;     
}
export interface Location {    
coordinates: Coordinates;
timezone: Timezone;
}