在 Angular 8 中控制标题标签位置答案

【问题标题】：Control header label position in Angular 8在 Angular 8 中控制标题标签位置
【发布时间】：2019-11-28 02:50:40
【问题描述】：

我在 Angular 8 中创建数据表。我试图显示“A 列”标题左对齐和“B 列”标题右对齐。尝试了许多解决方案，但没有任何效果。应用于标题标签的 CSS 类是 'datatable-header-cell' 请帮助我正确对齐这些标签。我在 Paint 中画了一个小样本来展示我正在尝试做的事情。提前致谢。

<ngx-datatable #myTable class="material skf-table" [rows]="rows" [columns]="columns" [columnMode]="'force'"
  [scrollbarH]="true" [headerHeight]="'50'" [loadingIndicator]="isLoading" [footerHeight]="'50'" [rowHeight]="'50'">
  <ngx-datatable-column *ngFor="let column of columns; let i = index" name="{{ column.name }}"
    prop="{{ column.prop }}" frozenLeft="{{ column.frozenLeft }}">
    <ng-template let-value="value" let-row="row" let-name="name" ngx-datatable-cell-template>
      <ng-container ngSwitch="{{ column.prop }}">
        <ng-container *ngSwitchCase="'Column A'">
          <span [style.color]="value > 0?'green':'red'" [style.text-align]="right"
            style="float: right;">{{ numberWithCommas(value.toFixed(0)) }}</span>
        </ng-container>
        <ng-container *ngSwitchCase="'Column B'">
          <span [style.color]="value > 0?'green':'red'" [style.text-align]="right"
            style="float: right;">{{ numberWithCommas(value.toFixed(0)) }}</span>
        </ng-container>

    </ng-template>
  </ngx-datatable-column>
</ngx-datatable>

【问题讨论】：

标签： angular7 angular8 ngx-datatable

【解决方案1】：

经过一些研究，我在 css 文件中添加了以下代码，这为我解决了问题。

::ng-deep .datatable-header-cell:nth-child(1)      {
  text-align: left !important;
}


::ng-deep .datatable-header-cell      {
  text-align: right !important;
}

【讨论】：