Angular 8中的控件标题标签位置

Question

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

<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>

Answer 1

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

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


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