我创建了一个有角度的页面,该页面从后端检索JSON数据。
Json输出的格式如下
fields
0 "count"
1 "Date"
2 "Status"
rows
0 "["2","2019-11-21","Operate"]"
1 "["3","2019-12-12","Maintain"]"
我想使用来自字段的值作为标题和来自行的值作为单元格在前端创建一个表。例如
_____________________________
| count | Date | Status |
|---------------------------|
| 2 |2019-11-21| Operate|
| 3 |2019-12-12|Maintain|
-----------------------------
但是调用数据时却得到这些结果
| count | Date | Status |
|-------------------------------------------------|
|["2","2019-11-21","Operate"] | | |
|["3","2019-12-12","Maintain"]| | |
---------------------------------------------------
我的表格的html代码如下
<table class="table table-borderless table-striped table-hover" *ngIf="appDetail?.fields">
<thead>
<th *ngFor="let field of appDetail.fields" class="table-header">{{field}}</th>
</thead>
<tbody>
<ng-container *ngFor="let row of appDetail.rows">
<tr ng-repeat="row in appDetail.rows">
<td ng-repeat="i in row">{{row}}</td>
</tr>
</ng-container>
</tbody>
</table>
我的模特
export class AppDetail {
public fields: string[];
public rows: string[][];
}
我的组件
public getSealData() {
this.sealidService.getSplunkData(this.idValue).subscribe(data => {
this.appDetail = data as AppDetail;
console.log(data.fields);
console.log(data.rows);
})
}
您可以这样做:迭代行,行元素本身是数组,而不是迭代那些以渲染td
<ng-container *ngFor="let row of appDetail.rows">
<tr>
<ng-container *ngFor="let item of row">
<td>{{item}}</td>
</ng-container>
</tr>
</ng-container>
</tbody>