角度材料表 - 为动态表中的特定列分配宽度

Question

我有一个动态的角度材料表组件，它的工作原理是这样的：

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

  <ng-container *ngFor="let column of columns" [matColumnDef]="column.key">
    <mat-header-cell *matHeaderCellDef mat-sort-header>
      {{column.name}}
    </mat-header-cell>
    <mat-cell *matCellDef="let row"
              [@getIn]>
            {{row[column.key] || 'N/A'}}
    </mat-cell>
  </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"
           matRipple
           [matRippleDisabled]="!allowSelect"
           [class.selectableRow]="allowSelect"></mat-row>
</table>

该组件接受一个列列表，例如：

[{
   key: "date",
   name: "Date",
}, {
   key: "title",
   name: "Book Name",
}]

它有效，但我正在尝试增强它并将width属性发送到其中一列（可以是任何列）。 例如：

[{
       key: "date",
       name: "Date",
       width: 110
    }, {
       key: "title",
       name: "Book Name",
    }]

如何根据属性调整列宽？ 我不想在 CSS 中根据此列标题对类名进行硬编码（因为它不再是动态的）。 请注意，宽度仅适用于特定列。

我尝试更新 mat-cell flex样式属性如下：

<mat-cell *matCellDef="let row"
              [@getIn]
              [style.flex]="column.width ? '0 0 ' + column.width + 'px' : null">

但它弄乱了其余列的宽度（我猜它覆盖了当前的 flex 属性，我不知道默认值是什么）

任何的想法？

Answer 1

我在 Angular CLI 版本中工作。 9、以下是经过测试的！

只需使用 MatTable [width]="column.width" @Input() 属性

例如

<ng-container matColumnDef="Column">
        <th mat-header-cell *matHeaderCellDef> Column Name </th>
        <td [width]="element.width" mat-cell *matCellDef="let element"> {{element.manuscriptNumber}} </td>
</ng-container>