如何解决如何解析json文件中的对象列表并显示它?
我正在尝试使用import方法来解析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>
我的控制台日志显示所有内容,但未显示在有角度的应用程序列表中,这里我在做什么错?我将在下面发布要解析的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",{"CityCode":"2147714","CityName":"Sydney","Temp":"27.3",{"CityCode":"4930956","CityName":"Boston","Temp":"4.2","Status":"Mist"},{"CityCode":"1796236","CityName":"Shanghai","Temp":"10.1",{"CityCode":"3143244","CityName":"Oslo","Temp":"-3.9","Status":"Clear"}]}
解决方法
这是因为您的根对象不是数组类型,而您的对象是
{
List: city[]
}
您可以访问属性List
<ul *ngFor="let c of cities.List">
<li>{{c.CityName}}</li>
</ul>
注意:您的代码需要重构,因为它不会显示为干净的代码。我的答案只是向您显示错误在哪里
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。