如何动态调整角度材料列表的宽度？

Question

嘿，我想调整用角形材料实现的桌子的宽度。我已经获得了：

我的专栏是动态的：

<ng-container *ngFor="let column of dataTable.getValues() ; let colIndex = index" matColumnDef="{{column.label}}" class="columnSize">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{column.label}}</th>
        <td mat-cell  *matCellDef="let row" [style.color]="color"> {{row[colIndex].value }} </td>
      </ng-container>

并且我尝试了不同的解决方案来调整列宽的大小，例如：

 .mat-header-cell {
    flex: 0 0 75px !important;
  }

但是结果是一样的。

Answer 1

我找到了解决方法：

我使用“带有代码flex的表”作为指南建议：https://material.angular.io/components/table/overview#tables-with-code-display-flex-code-

更新代码：

<div class="mat-elevation-z8">
      <mat-table [dataSource]="dataSource" matSort>

        <!-- Columns dynamic -->
        <ng-container *ngFor="let column of dataTable.getValues() ; let colIndex = index" matColumnDef="{{column.label}}">
          <mat-header-cell *matHeaderCellDef mat-sort-header> {{column.label}}</mat-header-cell>
          <mat-cell *matCellDef="let row" [style.color]="color"> {{row[colIndex].value }} </mat-cell>
        </ng-container>

        <!-- Header -->
        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
      </mat-table>
      <!-- <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator> -->
    </div> 

现在的结果是：

最好的问候