我在带有动态表内容和标题的 Angular 材料表中遇到问题。
这是我的表的 JSON 数据。
let dataobj=[
[
{
"key": "Data1",
"value": "ENF"
},
{
"key": "Data2",
"value": "10598489700"
},
{
"key": "Data3",
"value": "3662946630"
},
{
"key": "Comments",
"value": ""
},
{
"key": "Readonly",
"value": "true",
"index": 0
}
],
[
{
"key": "Data1",
"value": "FNS"
},
{
"key": "Data2",
"value": "10598489700"
},
{
"key": "Data3",
"value": "3662946630"
},
{
"key": "Comments",
"value": ""
},
{
"key": "Readonly",
"value": "true",
"index": 1
}
]
]
这是创建 displayColumnHeader 数组值的代码
this.displayColumnHeader = Object.keys(dataobj[0]).map(key => (key));
下面的代码用于将值传递到数据表
this.dataSource = new MatTableDataSource<Element>(dataobj);
请找到以下模板和绑定代码
<div class="row">
<div class="col-lg-12">
<div class="example-container">
<mat-table #table [dataSource]="dataSource">
<!-- please check the below code section for this part -->
<mat-header-row *matHeaderRowDef="let header; displayColumnHeader"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayColumnHeader;"></mat-row>
</mat-table>
<mat-paginator #paginator [pageSize]="10" [pageSizeOptions]="[5, 10, 20]">
</mat-paginator>
</div>
</div>
</div>
下面的代码部分用于行和列单元格映射。下面的部分是我很难映射标题单元格和数据单元格的值。因为我在创建模板时不知道属性名称。它是动态的。
<ng-container *ngIf="row.key.indexOf('Readonly')<0 && row.key.toUpperCase().indexOf('COMMENTS')<0">
<ng-container>
<mat-header-cell *matHeaderCellDef>{{row.key}}</mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.value}} </mat-cell>
</ng-container>
</ng-container>