启用冻结列时，角度光滑网格中的列标题未对齐

Question

问题陈述：-
启用冻结列时，角度平滑网格中的列标题未对齐** **

截图：-

环境：-

软件	版本
角度	15.2.9
Angular-Slickgrid	4.3.1
操作系统	Windows 10
节点	18.17.0
NPM	9.6.7

**重现步骤：- **
1. 水平滚动有角度的光滑网格
2. 选择一列并启用冻结列。

您现在可以看到列标题未对齐。

这是我的 HTML 代码：-

 <angular-slickgrid gridId="grid20"
                     gridWidth="875"
                     [columnDefinitions]="columnDefinitions"
                     [gridOptions]="gridOptions"
                     [dataset]="dataset"
                     (onAngularGridCreated)="angularGridReady($event.detail)">
  </angular-slickgrid>

这是ts代码：-

setFrozenColumns(frozenCols: number) {
    this.gridObj.setOptions({ frozenColumn: frozenCols });
    this.gridOptions = this.gridObj.getOptions();
  }

我尝试过的：-我尝试在滚动列表后冻结列。之后，列标题在有角度的光滑网格中未对齐。由于这种行为，无法识别 Slickgrid 中每列的确切列标题。

我的期望：- 即使滚动列表并启用该列的冻结列后，列标题也不应该错位。

Answer 1

请注意，我是 Angular-Slickgrid 和 Slickgrid-Universal 的作者

我可以复制该问题，并将在库中提供修复程序（类似于下面所示），但请注意，我只会对目前为 6.x 的最新主要版本应用修复程序（基本上我不会一次支持多个主要版本）。不过，您可以自己添加一个临时修复程序，我刚刚发现它有效，基本上您必须在设置冻结列之前将网格视口完全向左滚动。以下是临时修复

setFrozenColumns(frozenCols: number) {
  // loop through all viewports (top/bottom) and set their X position to left 0
  const gridViewports = this.gridObj.getViewports();
  gridViewports.forEach(vp => {
    vp.scrollLeft = 0; // scroll grid completely to the left position
    vp.dispatchEvent(new CustomEvent('scroll')); // trigger scroll to realign column headers as well
  });

  // at this point you're back to the left and so you can call the freeze
  this.gridObj.setOptions({ frozenColumn: frozenCols, alwaysShowVerticalScroll: false });
  this.gridOptions = this.gridObj.getOptions() ?? {};
}

另请注意，SlickGrid 不支持冻结比浏览器宽度更宽的列，因此您需要确保不要水平向右滚动太多，否则它将无法工作。