[英]How to print a json object to a Mat table?
我正在尝试打印 http 以响应垫子表。 我无法将数据格式化为数组并将其设置为 mat-datasource。 有人可以指导我。
[
{
"n1":"abcd",
"n2":"abcde",
"A1":
{
"A11":{"t":b1},
"A12":{"t1":b2},
"A13":{"t":b3},
"A14":{"t":b4},
"A15":{"t":b5}}
},
{
"n2":"bcde",
"n2":"bcdef",
"A1":
{
"A11":{"t":b1,"t1":b2},
"A12":{"t":b3},
"A13":{"t":b4},
"A14":{"t":b5},
"A15":{"t":b6}
}
}
}
]
垫子表应该是这样的。
---------------------------------------------------
| data | A11 | A12 |A13 | A14 | A15 |
---------------------------------------------------
| n1,n2 | t | t | t | t | t |
---------------------------------------------------
| n1,n2 | t | t | t | t | t |
---------------------------------------------------
我在下面尝试过,但无法将子值(A11、A12、A13、A14、A15)设置为数组
ngOnInit() {
this.gService.getlist().subscribe(
(res: any[]) => {
let GL = new Array();
res.forEach(gl => {
GL.push({
n1: gl.n1,
n2: gl.n2,
A1: gl.A1,
// unable to read other json values part of A1.
})
})
this.datasource.data = GL;
}
````
我不确定您是如何定义模板的。 但以下似乎工作。 请注意,我使用的是括号表示法。 理论上它也应该使用点符号,但是 TS Lint 可能会抛出一些错误。
Controller
export class AppComponent {
name = 'Angular 5';
displayedColumns = ['data', 'a11', 'a12', 'a13', 'a14', 'a15'];
dataSource: any;
inputData = [];
constructor() {
SOURCE_DATA.forEach(data => {
this.inputData.push(
{
data: data['n1'] + ', ' + data['n2'],
A11: data['A1']['A11']['t'],
A12: data['A1']['A12']['t'] || data['A1']['A12']['t1'],
A13: data['A1']['A13']['t'],
A14: data['A1']['A14']['t'],
A15: data['A1']['A15']['t']
}
);
});
this.dataSource = new MatTableDataSource<any>(this.inputData);
}
}
模板
<ng-container *ngIf="dataSource">
<div class="example-container mat-elevation-z8">
<mat-table #table [dataSource]="dataSource">
<ng-container matColumnDef="data">
<mat-header-cell *matHeaderCellDef> Data </mat-header-cell>
<mat-cell *matCellDef="let a"> {{a.data}} </mat-cell>
</ng-container>
<ng-container matColumnDef="a11">
<mat-header-cell *matHeaderCellDef> A11 </mat-header-cell>
<mat-cell *matCellDef="let a"> {{a.A11}} </mat-cell>
</ng-container>
<ng-container matColumnDef="a12">
<mat-header-cell *matHeaderCellDef> A12 </mat-header-cell>
<mat-cell *matCellDef="let a"> {{a.A12}} </mat-cell>
</ng-container>
<ng-container matColumnDef="a13">
<mat-header-cell *matHeaderCellDef> A13 </mat-header-cell>
<mat-cell *matCellDef="let a"> {{a.A13}} </mat-cell>
</ng-container>
<ng-container matColumnDef="a14">
<mat-header-cell *matHeaderCellDef> A14 </mat-header-cell>
<mat-cell *matCellDef="let a"> {{a.A14}} </mat-cell>
</ng-container>
<ng-container matColumnDef="a15">
<mat-header-cell *matHeaderCellDef> A15 </mat-header-cell>
<mat-cell *matCellDef="let a"> {{a.A15}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
</div>
</ng-container>
工作示例: Stackblitz
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.