如何解析 json 文件中的对象列表并显示它？

Question

我正在尝试使用导入方法来解析 json 文件，这就是我的代码的样子。

import { Component } from '@angular/core';
import * as data from './cities.json';


@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})


export class AppComponent {
  title = 'weather-app';

  cities: any = (data as any).default;

constructor(){}
 ngOnInit(){
console.log(data);
 }
}

这就是我尝试显示它的方式，

<ul *ngFor="let c of cities"> 
<li>{{c.CityName}}</li>    
</ul>

我的控制台日志显示了所有内容，但它没有出现在 angular 应用程序列表中，我在这里做错了什么？我将 post 我试图在下面解析的 json 文件。提前致谢:)

 {"List":
 [{"CityCode":"1248991","CityName":"Colombo","Temp":"33.0","Status":"Clouds"}, 
  {"CityCode":"1850147","CityName":"Tokyo","Temp":"8.6","Status":"Clear"}, 
  {"CityCode":"2644210","CityName":"Liverpool","Temp":"16.5","Status":"Rain"}, 
  {"CityCode":"2988507","CityName":"Paris","Temp":"22.4","Status":"Clear"}, 
  {"CityCode":"2147714","CityName":"Sydney","Temp":"27.3","Status":"Rain"}, 
  {"CityCode":"4930956","CityName":"Boston","Temp":"4.2","Status":"Mist"}, 
  {"CityCode":"1796236","CityName":"Shanghai","Temp":"10.1","Status":"Clouds"}, 
  {"CityCode":"3143244","CityName":"Oslo","Temp":"-3.9","Status":"Clear"}]}

Answer 1

这是因为你的根对象不是数组类型，你的对象是

{ 
  List: city[]
}

您可以访问属性 List

<ul *ngFor="let c of cities.List"> 
<li>{{c.CityName}}</li>    
</ul>

注意：您的代码需要重构，因为它看起来不是干净的代码。我的回答只是告诉你错误在哪里

如何解析 json 文件中的对象列表并显示它？

how to parse a List of Objects in a json file and display it?

json

angular

angular8