使用 ngStyle 为粘性列设置 Angular 材质数据表标题左侧 CSS 属性？

【问题标题】：Setting the Angular Material Data Table Header Left CSS Property with ngStyle for Sticky Columns?使用 ngStyle 为粘性列设置 Angular 材质数据表标题左侧 CSS 属性？
【发布时间】：2021-09-13 14:24:59
【问题描述】：

在此演示中，我尝试使用 ngStyle 将 CUSTOMER mat-header-cell 的 left CSS 属性动态设置为 64px，但看起来 Angular 用它认为应该是的值覆盖了该值... 216px 在应用 ngStyle 更新后。

https://stackblitz.com/edit/angular-material-data-table-module-styling-sticky-column-adjust

关于如何解决这个问题的想法？

【问题讨论】：

看看这个：minimal reproducible example

标签： html css angular typescript angular-material

【解决方案1】：

正如您所说，由于某些默认覆盖，它不会占用 64 像素。在这种情况下，我们需要使用 left:64px !important。但是使用 ngStyle 时不支持使用 '!important'。因此，我们在 css 文件中定义了一个新类

    .leftMargin {
      left: 64px !important;
    }

在 ngFor 循环中，我们仅在列名为“客户”时应用此 css 类。

     <ng-container *ngFor="let c of COLUMNS" matColumnDef="{{c.toUpperCase()}}" [sticky]="isSticky(c)">
            <mat-header-cell [ngClass]="{'leftMargin': c=='CUSTOMER'}" [ngStyle]="styleHeaderCell(c)" *matHeaderCellDef mat-sort-header>
              {{c.toUpperCase().split('_').join('')}}
            </mat-header-cell>
            <mat-cell *matCellDef="let row;">{{row[c.toLowerCase()] ? row[c.toLowerCase()] : row[c.toUpperCase()]}}
            </mat-cell>
     </ng-container>

请参阅此 stackblitz 列表：https://stackblitz.com/edit/angular-material-data-table-module-styling-sticky-column-cywshb?file=src%2Fapp%2Fapp.component.html

【讨论】：