json - 如何使用 Angular 访问 json 数组中的对象?
问题描述
我无法访问教学大纲数组并在 js 控制台中对其进行控制台。另外,如何在 Angular 文件的 HTML 组件中打印?我尝试了很多方法,但都没有成功。也许我觉得我错过了一些非常容易的东西。你们能帮我解决这个问题吗?您还可以解释一下如何使用 angular 或 typescript 轻松访问 JSON 格式吗?也许解释清楚会让我更容易使用这个 JSON。
[{
"State": "Tamil Nadu",
"syllabus": [
{
"board": "CBSE",
"details": [
{
"subject": "Tamil",
"LKG": true,
"UKG": true,
"I": true,
"II": true,
"III": true,
"IV": true,
"V": true,
"VI": true,
"VII": true,
"VIII": true,
"IX": true,
"X": true,
"XI": true,
"XII": true
},
{
"subject": "English",
"LKG": true,
"UKG": true,
"I": true,
"II": true,
"III": true,
"IV": true,
"V": true,
"VI": true,
"VII": true,
"VIII": true,
"IX": true,
"X": true,
"XI": true,
"XII": true
},
{
"subject": "Maths",
"LKG": true,
"UKG": true,
"I": true,
"II": true,
"III": true,
"IV": true,
"V": true,
"VI": true,
"VII": true,
"VIII": true,
"IX": true,
"X": true,
"XI": true,
"XII": true
},
{
"subject": "Physics",
"LKG": true,
"UKG": true,
"I": true,
"II": true,
"III": true,
"IV": true,
"V": true,
"VI": true,
"VII": true,
"VIII": true,
"IX": true,
"X": true,
"XI": true,
"XII": true
},
{
"subject": "Chemistry",
"LKG": true,
"UKG": true,
"I": true,
"II": true,
"III": true,
"IV": true,
"V": true,
"VI": true,
"VII": true,
"VIII": true,
"IX": true,
"X": true,
"XI": true,
"XII": true
},
{
"subject": "Biology",
"LKG": true,
"UKG": true,
"I": true,
"II": true,
"III": true,
"IV": true,
"V": true,
"VI": true,
"VII": true,
"VIII": true,
"IX": true,
"X": true,
"XI": true,
"XII": true
}
]
},
{
"board": "State board",
"details": []
}
]
},
{
"State":"Kerala"
}]
html 组件和 TS :
<div *ngFor="let item of data"> <p>{{item.syllabus}}</p> </div>
ngOnInit() {
this.dataService.sendGetRequest().subscribe(( data: any[]) => { console.log(data); this.data = data; console.log(); });
}
注意:没有错误,只是它什么都不显示
解决方案
您需要使用具有至少一个管道*ngFor
实例的嵌套循环。keyvalue
尝试以下
控制器
export class AppComponent {
data = SUBJECTS;
originalOrder = (a: KeyValue<number,string>, b: KeyValue<number,string>): number => {
return 0;
}
}
模板
<ng-container *ngFor="let state of data">
<h1>{{ state.State }}</h1>
<ng-container *ngFor="let syllabus of state.syllabus">
<h3>{{ syllabus.board }}</h3><hr>
<ng-container *ngFor="let detail of syllabus.details">
<ng-container *ngFor="let grade of detail | keyvalue: originalOrder; let first=first">
<h3 *ngIf="first; else gradesBlock">{{ grade.key }}: {{ grade.value }}</h3>
<ng-template #gradesBlock>{{ grade.key }}: {{ grade.value }}</ng-template>
<br/>
</ng-container>
</ng-container>
</ng-container>
</ng-container>
keyvalue
管道排序顺序来自:https ://stackoverflow.com/a/52794221/6513921
推荐阅读
- database - 论坛帖子包含图像,如何将其保存在服务器端?
- php - Laravel 8,api中的会话不起作用
- python - 如何使事件循环同时运行任务?
- javascript - 放置在反应中的HTML组件不遵循样式
- java - 如何在 java 的颤振插件中创建意图
- python - 这个表达式有什么作用:(x, y) = (y, x % y)?
- cmake - 如何在 Ubuntu 上解决 colcon 构建问题?
- reactjs - 嵌套路由在 Route 作为 Modal react-router 中不起作用
- amazon-web-services - 使用两个副本设置 rabbitmq 部署
- sql - 对某些数据库名称的 SQL 查询