如何在角形物料表中连续显示表标题? [英] How to display the table headers in a row, in angular material table?
问题描述
我的材料"表以以下方式显示值:
姓名|数量
芒果| 10
<div class="table-cover center-table">
<div class="mat-elevation-z8 elevation-scroll-control">
<table mat-table class="full-width-table left-margin" [dataSource]="dataSource" matSort aria-label="Elements">
<!-- Name Column -->
<ng-container matColumnDef="name">
<td mat-header-cell *matHeaderCellDef >Name</td>
<td mat-cell *matCellDef="let row" class="">
<div class="cell-style padding-left">{{row.Name}}</div>
</td>
</ng-container>
<!-- quantity Column -->
<ng-container matColumnDef="quantity">
<td mat-header-cell *matHeaderCellDef>quantity</td>
<td mat-cell *matCellDef="let row">
<div class="cell-style">{{row.quantity}}</div>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"> </tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"> </tr>
</table>
</div>
</div>
但是我想显示如下值:
名称 |芒果
质量 | 10
我该如何实现?任何帮助都非常感激
推荐答案
您可以通过以下方式实现:
You may do that by:
-
将数据从列转移到行:
Transposing your data from columns to row:
Before:
Mango |10
Banana|5
Before:
Mango |10
Banana|5
After:
Mango|Banana
10|5
After:
Mango|Banana
10|5
包括标签作为数据的第一列:
Including the labels as the first column of your data:
Name|Mango|Banana
Quantity|10|5
Name|Mango|Banana
Quantity|10|5
调整表以动态显示列(以便您可以具有任意数量的列),如本示例中的
Adjust your table to display columns dynamically (so that you may have any number of columns), as on this example from angular material table documentation:
<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[column]}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
<tr mat-row *matRowDef="let row; columns: columnsToDisplay;"></tr>
</table>
-
如果不需要,您可以删除标题行
If not required you may remove the header row
如果要格式化第一列,则可以使用一些CSS作为:
If you want to format the first column, you may use some css as:
td.mat-cell:nth-child(1) {
// formatting
}
td.mat-cell:nth-child(1) {
// formatting
}
此外,如果需要,您可以使用MatColumnDef的属性粘滞性来保持第一列发粘(在这种情况下,您可能希望将第一列与动态* ngFor循环分开,以便您可以轻松地仅第一列为粘性)
Also, if required, you may use property sticky of MatColumnDef to keep the first column sticky (in this case you may want to have the first column separate from the dynamic *ngFor loop, so that you may easily have only the first column sticky)
我已经创建了一个有效的 stackblitz示例
I've created a working stackblitz example
这篇关于如何在角形物料表中连续显示表标题?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!