需要在材料数据表中显示嵌套的 JSON 对象 [英] Need to display Nested JSON Object in Material Data Table
问题描述
我需要将来自后端的嵌套 JSON 对象显示为我的 MatTableDataSource 的列字段.
I need to display nested JSON Object coming from my backend as the column fields of my MatTableDataSource.
这是我的 JSON 对象:
This is my JSON Object:
[{
"workstationId": 100,
"assemblylineId": 100,
"workstationDescription": "Testing1",
"workstationTest": "Yes",
"createdAt": "2019-03-20",
"updatedAt": "2019-03-20",
"assemblylines": [{
"assemblylineName": "assembly1"
}]
},
{
"workstationId": 101,
"assemblylineId": 100,
"workstationDescription": "workstation1",
"workstationTest": "No",
"createdAt": "2019-04-04",
"updatedAt": "2019-04-04",
"assemblylines": [{
"assemblylineName": "assembly5"
}]
},
{
"workstationId": 102,
"assemblylineId": 101,
"workstationDescription": "workstation2",
"workstationTest": "No",
"createdAt": "2019-04-04",
"updatedAt": "2019-04-04",
"assemblylines": [{
"assemblylineName": "assembly4"
}]
},
{
"workstationId": 103,
"assemblylineId": 102,
"workstationDescription": "Testing2",
"workstationTest": "Yes",
"createdAt": "2019-04-04",
"updatedAt": "2019-04-04",
"assemblylines": [{
"assemblylineName": "assembly3"
}]
}
]
这是我的用户界面:MatTableDataSource
这是我的workstation.model.ts
This is my workstation.model.ts
export interface Workstation {
workstationId: number;
workstationDescription: string;
workstationTest: string;
assemblylines: {
assemblylineName: string;
};
}
我已经检查了 JSON 对象解构、解析、字符串化的教程,但我没有到达那里,因为该服务正在返回 Workstation[] 对象而不是 Workstation 对象.请让我知道是否有办法将 assemblylineName 属性显示为带有其值的列.
I have checked tutorials of JSON Object Destructuring, Parsing, Stringifying but I'm not getting there as the service is returning Workstation[] object instead of Workstation object. Kindly let me know if there's a way I can display assemblylineName property as a column with its values.
推荐答案
你可以这样做:
.html
<mat-table #table [dataSource]="workstationDataSource">
// SR NUMBER
<ng-container matColumnDef="sr_no">
<mat-header-cell *matHeaderCellDef>Sr. No.</mat-header-cell>
<mat-cell *matCellDef="let row">
<span>{{ row.workstationId }}</span>
</mat-cell>
</ng-container>
// DESCRIPTION
<ng-container matColumnDef="description">
<mat-header-cell *matHeaderCellDef>Description</mat-header-cell>
<mat-cell *matCellDef="let row">
<span>{{ row.workstationDescription}}</span>
</mat-cell>
</ng-container>
// TEST
<ng-container matColumnDef="test">
<mat-header-cell *matHeaderCellDef>Test</mat-header-cell>
<mat-cell *matCellDef="let row">
<span>{{ row.workstationTest}}</span>
</mat-cell>
</ng-container>
// ASSEMBLY LINES
<ng-container matColumnDef="assembly_lines">
<mat-header-cell *matHeaderCellDef>Assembly Line</mat-header-cell>
<mat-cell *matCellDef="let row">
<span>{{ row.assemblylines.assemblylineName }}</span>
</mat-cell>
</ng-container>
// ACTIONS
<ng-container matColumnDef="actions">
<mat-header-cell *matHeaderCellDef></mat-header-cell>
<mat-cell *matCellDef="let row">
<button (click)="edit(row)">EDIT</button>
<button (click)="delete(row)">DELETE</button>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
</mat-table>
.ts
...
displayedColumns = [
'sr_no',
'description',
'test',
'assembly_lines',
'actions'
];
workstationDataSource: MatTableDataSource<Workstation>;
...
// then you will need to populate the 'workstationDataSource' variable
getWorkstations() {
this.http.get(...).subscribe(res => {
...
this.workstationDataSource.data = new MatTableDataSource<Workstation>();
this.workstationDataSource.data = res;
...
});
}
...
希望有所帮助.
这篇关于需要在材料数据表中显示嵌套的 JSON 对象的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!