在列配置中設置 Angular Material mat-table 列寬

Question

我的 Angular Material mat-table列有以下列配置：

export interface TableColumn {
  name: string;
  dataKey: string;
  isSortable?: boolean;
  width?: string; // column width
}

//...

this.tableColumns = [
    {
        name: 'Id',
        dataKey: 'id',
        position: 'left',
        width: '50px'
    },
    {
        name: 'Name',
        dataKey: 'name',
        position: 'left',
        width: '100%'
    }
];

據我所知，很多人使用 css 來設置此頁面上的列寬等。但是，如果我們在this.tableColumns數組中按像素和百分比設置每列的列寬，那不是很好定義列時的其他屬性？ 我想我只是需要的配置mat-table ，但我不知道是否有這樣的配置mat-table 。 如果沒有，我想我可以使用 [style.width] 並按列配置值設置每一列。 有什么建議嗎？

Answer 1

通常，您定義了基於數組的列，例如：

<ng-container *ngFor="let column of tableColumns;let first=first">
        <ng-container [matColumnDef]="column.dataKey">
            <th [style.width]="column.width" mat-header-cell *matHeaderCellDef>
                  {{column.name}}
            </th>
            <td [style.width]="column.width" mat-cell 
                 *matCellDef="let element"> {{element[column.dataKey]}}
            </td>
        </ng-container>
</ng-container>

而你的displayColumns為

this.displayedColumns=this.tableColumns.map(x=>x.dataKey)

注意：如果只使用您可以使用的數字，我假設您將寬度定義為“50%”或“30px”，例如

[style.width]="column.width+'px'"

更新假設您想創建一個帶有操作按鈕的列，但此按鈕可以是一個、兩個或三個。 我們可以為最后一列指定寬度為“1%”和“white-space: nowrap”

//we has two variables
btDelete:boolean=true;
btEdit:boolean:true;

<ng-container matColumnDef="action">
    <th style="width:1%" mat-header-cell *matHeaderCellDef>
    </th>
    <td style="width:1%;white-space: nowrap;" mat-cell 
         *matCellDef="let element">
        <button *ngIf="btEdit" mat-button (click)="edit(element)">Edit</button>
        <button *ngIf="btDelete" mat-button (click)="delete(element)">Delete</button> 
    </td>
</ng-container>

注意：我不太確定列的寬度會發生什么，因為 % total 大於 100%

我們可以嘗試在 flex-mode 下使用 mat-table

<ng-container *ngFor="let column of columns">
    <ng-container [matColumnDef]="column.name">
        <mat-header-cell [style.flex]="column.width" *matHeaderCellDef> {{column.width}}</mat-header-cell>
        <mat-cell [style.flex]="column.width" *matCellDef="let element"> {{element[column.name]}} </mat-cell>
    </ng-container>
</ng-container>
<ng-container matColumnDef="action">
    <mat-header-cell style="flex:0 1 auto;visibility:hidden" *matHeaderCellDef>
        <button *ngIf="btEdit" mat-button>Delete</button>
        <button *ngIf="btDelete" mat-button>Delete</button>
    </mat-header-cell>
    <mat-cell style="flex:0 1 auto" *matCellDef="let element"> <button *ngIf="btEdit" mat-button>Edit</button>
        <button *ngIf="btDelete" mat-button>Delete</button></mat-cell>
</ng-container>

看到列“動作”和“頭”重復按鈕 - 可見性：隱藏 -

注意：在這種情況下，“with”-實際上是 flex- 是一個數字，而不是一個 %，

Answer 2

雖然沒有辦法在數組中定義列寬，但您應該能夠使用 ng-style 來定義它。 可以在 html 模板中提供特定於列的屬性，因此這也應該有效。 一個例子是

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  <mat-text-column name="position" [headerText]="headerText" [ngStyle]="{'width':'20%'}"></mat-text-column>

  <!-- Change the header text. -->
  <mat-text-column name="name" headerText="Element" [ngStyle]="{'width':'40%'}"></mat-text-column>

  <!-- Provide a data accessor for getting the cell text values. -->
  <mat-text-column name="weight" [dataAccessor]="getWeight" [ngStyle]="{'width':'40%'}"></mat-text-column>
</table>

style.width 的結果也可以由 ngStyle 完成，因此也應該以相同的方式工作。