我有一种情况,我从后端收到的数据是面向列的。该数据的外观示例如下:
[
{ columnName: "ID", cells: [1, 2, 3, 4, 5] },
{ columnName: "Name", cells: ["a", "b", "c", "d", "e"] }
]
到目前为止,我已经设法像这样配置我的 mat-table:
<table mat-table [dataSource]="data" class="mat-elevation-z8">
<ng-container [matColumnDef]="column" *ngFor="let column of displayedColumns">
<th mat-header-cell *matHeaderCellDef> {{column}} </th>
<td mat-cell *matCellDef="let element">{{element | json}}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
这给了我以下结果:
而实际上我希望看到这样的表格:
|------|------|
| ID | NAME |
|------|------|
| 1 | a |
| 2 | b |
| 3 | c |
| 4 | d |
| 5 | e |
有没有办法调整 matRowDef 以便将单元格属性定义为行?理想情况下,我只想在 mat-table 中更改它,所以我不需要操作我的数据然后再将其转换回来。