动态表标题始终向右对齐

Question

我有一个带有自定义标题的动态表，并带有将标题和单元格的文本向右对齐的条件。问题是标题总是始终右对齐（即使我删除了条件）。我希望标题和单元格仅在满足条件时才向右对齐。

我该如何解决？

PS：我需要那个arrowPosition代码，因为当箭头位于箭头后面并且标题向右对齐时，标题看起来很糟。

HTML：

<div perfectScrollbar [ngStyle]="{'max-height': '63vh', 'position': 'relative'}"
    class="mat-table__wrapper mat-table__wrapper--dashboard mb-4">

    <table mat-table class="lmat-elevation-z8" [dataSource]="dataSource" matSort matSortActive="id"
        matSortDirection="asc" matSortDisableClear>
        <ng-container *ngFor="let tbl of tableHeader" [matColumnDef]="tbl.columnID">
            <th arrowPosition='before' [class.align-right]="tbl.type === 'alignRight'" mat-header-cell *matHeaderCellDef
                mat-sort-header>
                {{tbl.columnName}}
            </th>

            <td [class.align-right]="tbl.type === 'alignRight'" mat-cell *matCellDef="let element">
                {{element[tbl.columnID]}}
            </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="getColumns(tableHeader); sticky: true"></tr>
        <tr mat-row *matRowDef="let row; columns: getColumns(tableHeader)"></tr>
    </table>
</div>

CSS

:host {
    ::ng-deep {
        .mat-table-sticky {
            z-index: 0 !important;
        }

        .mat-header-cell { z-index: 2 !important;}

    }
}

.align-right{
    text-align: right;
    background-color: pink;
}

表

我的自定义标题

export const tableHeader1 = [
  {
    columnID: 'id',
    columnName: 'ID',
    type: ''
  },
  {
    columnID: 'name',
    columnName: 'Name',
    type: ''
  },
  {
    columnID: 'price',
    columnName: 'Price',
    type: 'alignRight'
  },
  {
    columnID: 'age',
    columnName: 'Age',
    type: 'number'
  },
];