Question

我正在尝试使用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>

Angular + Material Table，如何实现对齐的固定宽度取决于单元格内容

0 个答案: