[英]How to manipulate json initialised with key into ngFor in angular 8
我有一個用密鑰初始化的 json(密鑰可以更改,它是動態的),我需要按照 static html 將我的值作為標題來嘗試,但我已經嘗試了一個主標題,但我已經嘗試了一個標題,但我已經嘗試了標題'Seconditem' 的鍵將出現在 li 標簽內。這是下面的代碼和演示https://stackblitz.com/edit/angular-ufbwzw?file=src%2Fapp%2Fapp.component.ts
<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>
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>
工作堆棧閃電戰:- https://stackblitz.com/edit/angular-kfwv4m?file=src/app/app.component.html
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.