html - 如何在角度 8 中将用密钥初始化的 json 操作到 ngFor
问题描述
我有一个用键初始化的json(键可以更改,它是动态的),我需要按照静态html操作成ngFor。我已经尝试过但没有工作,所以我评论了。'mainitem'的值将作为标题'Secondiitem' 的键将出现在 li 标签内。这是下面的代码和演示https://stackblitz.com/edit/angular-ufbwzw?file=src%2Fapp%2Fapp.component.ts
app.component.html
<p>
Start editing to see some magic happen :)
</p>
<!--<div>
<ul>
<ng-container *ngFor="let item of jsonarray">
<h5>{{item.mainitem}}</h5>
<li *ngFor="let subItem of item.Seconditem | keyvalue">
{{subItem.key}} - {{subItem.value}}
</li>
</ng-container>
</ul>
</div>
-->
<div>
<ul>
<h5>My item 1</h5>
<li>createddate</li>
<li>enddate</li>
<h5>My item 2</h5>
<li>origindate</li>
<li>startdate</li>
</ul>
</div>
app.component.ts
import { Component, OnInit } from "@angular/core";
@Component({
selector: "my-app",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
name = "Angular";
jsonarray = {
"575": [
{
mainitem: "My item 1",
Seconditem: {
createddate: "30-01-02",
enddate: "30-01-03"
}
},
{
mainitem: "My item 2",
Seconditem: {
origindate: "30-01-04",
startdate: "30-01-05"
}
}
]
};
ngOnInit() {}
}
解决方案
<ul>
<ng-container *ngFor="let item of jsonarray | keyvalue">
<ng-container *ngFor="let value of item.value">
<h5>{{value.mainitem}}</h5>
<li *ngFor="let subItem of value.Seconditem | keyvalue">
{{subItem.key}} - {{subItem.value}}
</li>
</ng-container>
</ng-container>
</ul>
工作 Stackblitz:- https://stackblitz.com/edit/angular-kfwv4m?file=src/app/app.component.html
推荐阅读
- javascript - Javascript ES6 类应该用作 React 状态吗?
- javascript - 如何使 iff 语句检测文本框中的任何文本
- xml - Spring Batch 在读取 XML 时不填充对象
- python - 为什么需要在 python moudle heapq 中的 func _siftup 末尾调用 _siftdown
- javascript - 无法让 React 应用程序渲染,出现错误:未终止的 JSX 内容
- codenameone - 取消 IAP 订阅
- firebase - Firebase(带有本机反应)HTTPS功能不接收参数
- python - 如何在不关闭窗口的情况下停止 mainloop 功能
- javascript - 打开多个扩展面板的问题
- android - 如果我之前已经下载过,如何避免从 firebase 下载图像?