我正在尝试使用Angular和Material实现动态单元格表来呈现来自SQL类服务器的半结构化数据。所以永远不会知道有多少字段,或者字段的内容和大小。只是一个JSON对象,带有'key':'value'结构。
到目前为止,我可以创建表格并动态显示单元格,但是希望将具有固定宽度的单元格基于最高值长度的内容。因为带有数字的单元格占用的空间比带有大量文本的字符串要少,但表格仍然是表格对齐的。
正在使用[ng-style]播放,但这是分别设置每一行而且表格丢失了表格对齐。
有没有办法从md-table和CSS本身自动格式化,或者我应该自己预先计算出以前显示的记录的正确宽度?
这是HTML:
YMX, <span style={{color: red}}>mon</span>treal, quebec
YUL, <span style={{color: red}}>mon</span>treal, quebec
这里是处理每个单元格内容样式的打字稿:
<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
<mat-table *ngIf="data" [dataSource]="data" matSort class="" [ngStyle]="{'width': tableWidth }">
<ng-container class="cell" *ngFor="let column of cells" [matColumnDef]="column">
<mat-header-cell *matHeaderCellDef mat-sort-header>{{ column }}</mat-header-cell>
<mat-cell *matCellDef="let row" [ngStyle]="setStyles(row[column], column)">{{ row[column] }}</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="columns"></mat-header-row>
<mat-row *matRowDef="let row; columns: columns;"></mat-row>
</mat-table>