如何在滚动时为ngx-datatable的frozenLeft列添加指定样式

问题原因 #

ngx-datatable 内部独立维护列与单元格的渲染逻辑，直接在 <ngx-datatable-column> 标签上绑定 [ngClass] 不会作用到实际渲染的单元格元素上，因此配置不生效。cellClass 是官方提供的自定义单元格样式的接口，但默认仅在表格数据源变更时重新计算，滚动事件修改flag后不会主动触发样式更新，需要额外配置。

具体实现步骤 #

1. 组件内配置依赖与基础变量 #

首先导入必要依赖，给表格绑定模板引用，注入变更检测器：

import { Component, ViewChild, ChangeDetectorRef } from '@angular/core';
import { DatatableComponent } from '@swimlane/ngx-datatable';

@Component({
  // 你的组件原有配置
})
export class YourComponent {
  @ViewChild('myTable') myTable: DatatableComponent;
  flag = false;

  constructor(private cdr: ChangeDetectorRef) {}
}

模板中给ngx-datatable添加模板引用：

<ngx-datatable
  #myTable
  (scroll)="onScroll($event)"
  <!-- 其他表格原有配置 -->
>

2. 改造滚动事件，触发样式更新 #

修改onScroll方法，更新flag后主动触发表格重新计算样式：

onScroll(event){
  this.flag = event.offsetX > 0;
  // 两种触发更新的方式二选一即可
  // 方式1：调用表格自带的重计算方法
  this.myTable.recalculate();
  // 方式2：触发当前组件的变更检测
  // this.cdr.markForCheck();
}

3. 配置cellClass方法 #

在组件内定义返回样式类的方法，注意要用箭头函数绑定this指向：

getCellClass = () => {
  return this.flag ? 'custom-style' : '';
}

// 如果需要同时修改冻结列的表头样式，再定义一个表头类方法
getHeaderClass = () => {
  return this.flag ? 'custom-style' : '';
}

4. 冻结列绑定样式属性 #

在设置了frozenLeft的列上绑定cellClass和headerClass：

<ngx-datatable-column
  name="冻结列"
  frozenLeft
  [cellClass]="getCellClass"
  [headerClass]="getHeaderClass"
>
  <!-- 列内容模板 -->
</ngx-datatable-column>

5. 配置样式（解决封装问题） #

由于Angular默认的视图封装会隔离组件样式，需要用::ng-deep让样式作用到ngx-datatable内部的单元格元素：

::ng-deep .custom-style {
  /* 你的自定义样式，示例： */
  background: #f0f0f0;
  border-right: 1px solid #ccc;
}

内容的提问来源于stack exchange，提问作者LoneWolf