Как установить одинаковые Dynami c Width для TH и TD в Angular - PullRequest
Новая
       10

Как установить одинаковые Dynami c Width для TH и TD в Angular

0 голосов
/ 27 апреля 2020

Я определяю ширину для каждого столбца динамически с помощью заранее определенных метаданных. Но в случае, если ширина метаданных слишком мала, чтобы поместиться в текст заголовка, я динамически определяю ширину, чтобы соответствовать тексту со значением th.scrollWidth:

HTML: 

<table mat-table [dataSource]="rows">
    <ng-container matColumnDef="{{column}}" *ngFor="let column of columns">
        <th #th mat-header-cell *matHeaderCellDef [fxFlex]="getColumnWidth(column.width, th)" style="white-space: nowrap">
            <span>{{column.value}}</span>
        </th>
        <td mat-cell *matCellDef="let element;" [fxFlex]="(column.width)+'px'">
            {{element[column]}}
        </td>
    </ng-container>

    <mat-header-row *matHeaderRowDef="columns; sticky: true;"></mat-header-row>
    <mat-row *matRowDef="let row; columns: columns;"></mat-row>    
</table>

Это getColumnWidth: 

public getColumnWidth(width: number, th: HTMLTableHeaderCellElement): string {
    const finalWidth = (width < th.scrollWidth) ? th.scrollWidth : width;
    return `${finalWidth}px`;
}

Проблема в том, что когда ширина столбца имеет размер th.scrollWidth, ширина строк отличается (column.width), поэтому таблица выглядит как беспорядок. Как я могу получить th.scrollWidth для строк, чтобы сделать ту же технику?

...