ngFor 对于复杂的 json
ngFor For complicated json
我有以下 JSON 数据并在 Angular 中使用 *ngFor
7 需要以表格格式显示数据。
<table class="table">
<tbody>
<tr>
<th></th>
<td>java</td>
<td>.Net</td>
<td>Integration</td>
</tr>
<tr>
<th>A1</th>
<td>20</td>
<td>30</td>
<td>30</td>
</tr>
<tr>
<th>B1</th>
<td>100</td>
<td>300</td>
<td>200</td>
</tr>
<tr>
<th>c1</th>
<td>200</td>
<td>300</td>
<td>309</td>
</tr>
</tbody>
这里是JSON
[
{
"grade":"A1",
"data":{
".Net" :"6",
"Java":"7",
"Integration":"7"
}
},
{
"grade":"B1",
"data":{
".Net" :"12",
"Java":"70",
"Integration":"56"
}
}
]
<table>
<tr>
<th></th>
<th>java</th>
<th>.Net</th>
<th>Integration</th>
</tr>
<tr *ngFor="let o of obj">
<th>{{o.grade}}</th>
<td>{{o.data['.Net']}}</td>
<td>{{o.data['Java']}}</td>
<td>{{o.data['Integration']}}</td>
</tr>
</table>
如果您想动态地进行,您可以创建一个格式化的数组,其中包含数组中的点。
这样试试:
TS:
data = [
{
"grade": "A1",
"data": {
".Net": "6",
"Java": "7",
"Integration": "7"
}
},
{
"grade": "B1",
"data": {
".Net": "12",
"Java": "70",
"Integration": "56"
}
}
]
formattedData:any = []
columnHeaders: string[] = []
ngOnInit() {
this.columnHeaders = Object.keys(this.data[0].test)
this.data.forEach(element => {
let row = {
grade:element.grade,
points : Object.keys(element.test).map(key => element.test[key])
}
this.formattedData.push(row)
});
}
HTML:
<table class="table">
<tbody>
<tr>
<th></th>
<td *ngFor="let item of columnHeaders">{{item}}</td>
</tr>
<tr *ngFor="let item of formattedData">
<th>{{item.grade}}</th>
<td *ngFor="let point of item.points">{{point}}</td>
</tr>
</tbody>
</table>
如果你想使用 keyValue,根本不要使用 formattedData 并执行此操作:
<table class="table">
<tbody>
<tr>
<th></th>
<td *ngFor="let item of data[0].test | keyvalue">{{item.key}}</td>
</tr>
<tr *ngFor="let item of data">
<th>{{item.grade}}</th>
<td *ngFor="let sub of item.test | keyvalue">{{sub.value}}</td>
</tr>
</tbody>
</table>
您可以使用 JSON
数组 object 之一创建 table headers 数组,如下所示。
export class AppComponent {
thFields: any = [];
data = [
{
"grade": "A1",
"data": {
".Net": "6",
"Java": "7",
"Integration": "7"
}
},
{
"grade": "B1",
"data": {
".Net": "12",
"Java": "70",
"Integration": "56"
}
}];
constructor () {
this.createHeaderFileds();
}
createHeaderFileds(): void {
for (let key in this.data[0].data) {
this.thFields.push(key);
}
}
}
您可以使用上面创建的 thFields
和 KeyValuePipe 执行此操作,如下所示。
<table class="table">
<tbody>
<tr>
<td *ngFor="let header of thFields">{{header}}<td>
</tr>
<tr *ngFor="let item of data">
<th>{{item.grade}}</th>
<td *ngFor="let sub of item.data | keyvalue">{{sub.value}}</td>
</tr>
</tbody>
我有以下 JSON 数据并在 Angular 中使用 *ngFor
7 需要以表格格式显示数据。
<table class="table">
<tbody>
<tr>
<th></th>
<td>java</td>
<td>.Net</td>
<td>Integration</td>
</tr>
<tr>
<th>A1</th>
<td>20</td>
<td>30</td>
<td>30</td>
</tr>
<tr>
<th>B1</th>
<td>100</td>
<td>300</td>
<td>200</td>
</tr>
<tr>
<th>c1</th>
<td>200</td>
<td>300</td>
<td>309</td>
</tr>
</tbody>
这里是JSON
[
{
"grade":"A1",
"data":{
".Net" :"6",
"Java":"7",
"Integration":"7"
}
},
{
"grade":"B1",
"data":{
".Net" :"12",
"Java":"70",
"Integration":"56"
}
}
]
<table>
<tr>
<th></th>
<th>java</th>
<th>.Net</th>
<th>Integration</th>
</tr>
<tr *ngFor="let o of obj">
<th>{{o.grade}}</th>
<td>{{o.data['.Net']}}</td>
<td>{{o.data['Java']}}</td>
<td>{{o.data['Integration']}}</td>
</tr>
</table>
如果您想动态地进行,您可以创建一个格式化的数组,其中包含数组中的点。
这样试试:
TS:
data = [
{
"grade": "A1",
"data": {
".Net": "6",
"Java": "7",
"Integration": "7"
}
},
{
"grade": "B1",
"data": {
".Net": "12",
"Java": "70",
"Integration": "56"
}
}
]
formattedData:any = []
columnHeaders: string[] = []
ngOnInit() {
this.columnHeaders = Object.keys(this.data[0].test)
this.data.forEach(element => {
let row = {
grade:element.grade,
points : Object.keys(element.test).map(key => element.test[key])
}
this.formattedData.push(row)
});
}
HTML:
<table class="table">
<tbody>
<tr>
<th></th>
<td *ngFor="let item of columnHeaders">{{item}}</td>
</tr>
<tr *ngFor="let item of formattedData">
<th>{{item.grade}}</th>
<td *ngFor="let point of item.points">{{point}}</td>
</tr>
</tbody>
</table>
如果你想使用 keyValue,根本不要使用 formattedData 并执行此操作:
<table class="table">
<tbody>
<tr>
<th></th>
<td *ngFor="let item of data[0].test | keyvalue">{{item.key}}</td>
</tr>
<tr *ngFor="let item of data">
<th>{{item.grade}}</th>
<td *ngFor="let sub of item.test | keyvalue">{{sub.value}}</td>
</tr>
</tbody>
</table>
您可以使用 JSON
数组 object 之一创建 table headers 数组,如下所示。
export class AppComponent {
thFields: any = [];
data = [
{
"grade": "A1",
"data": {
".Net": "6",
"Java": "7",
"Integration": "7"
}
},
{
"grade": "B1",
"data": {
".Net": "12",
"Java": "70",
"Integration": "56"
}
}];
constructor () {
this.createHeaderFileds();
}
createHeaderFileds(): void {
for (let key in this.data[0].data) {
this.thFields.push(key);
}
}
}
您可以使用上面创建的 thFields
和 KeyValuePipe 执行此操作,如下所示。
<table class="table">
<tbody>
<tr>
<td *ngFor="let header of thFields">{{header}}<td>
</tr>
<tr *ngFor="let item of data">
<th>{{item.grade}}</th>
<td *ngFor="let sub of item.data | keyvalue">{{sub.value}}</td>
</tr>
</tbody>