即使将enableHeaderMenu选项设置为true，Angular-Slickgrid标题菜单也不可见

Question

我在我的angular应用程序中使用Angular-Slickgrid。网格工作得很好，但我遇到了Headermenu的问题。当我运行应用程序时，在鼠标悬停时无法在任何标题中看到Headermenu图标。

我正在使用下面的网格选项：

this.gridOptions = {
  enableAutoResize: true,     
  enableCellNavigation: true,
  autoEdit: false,
  enableRowSelection: true,
  rowHeight: 30,
  editable: true,
  enableGrouping: true,
  forceFitColumns: true,
  enableHeaderButton: true,
  enableHeaderMenu: true,
  gridMenu: {
    hideExportCsvCommand: true,
    hideExportTextDelimitedCommand: true,
    hideExportExcelCommand: true,
    hideClearAllSortingCommand: true,
    hideForceFitButton: true,
    onBeforeMenuShow: (a, b) => {
    }
  }
};

正如你所看到的，我已经设置了enableHeaderMenu: true，即使在这之后也看不到标题菜单。下面是我的网格的图像：

​

​

当我将鼠标悬停在任何标题上时，看不到标题菜单图标(我需要单击该图标以打开标题菜单)

我已经添加了所需的css文件的引用，我认为css是工作的。以下是angular.json文件的代码：

"styles": [
          "src/styles.scss",              
          "./node_modules/font-awesome/css/font-awesome.css",
          "./node_modules/bootstrap/dist/css/bootstrap.css",
          "./node_modules/flatpickr/dist/flatpickr.css",
          "./node_modules/@fortawesome/fontawesome-free-webfonts/css/fontawesome.css",   
          "./node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-regular.css",
          "./node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-brands.css",
          "./node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-solid.css",
           "src/slickgrid-styles.scss",
          "./node_modules/angular-slickgrid/lib/multiple-select/multiple-select.css"
        ],
        "scripts": [
          "./node_modules/jquery/dist/jquery.js",
          "./node_modules/jquery-ui-dist/jquery-ui.min.js",
          "./node_modules/slickgrid/lib/jquery.event.drag-2.3.0.js",
          "./node_modules/bootstrap/dist/js/bootstrap.js",
          "./node_modules/angular-slickgrid/lib/multiple-select/multiple-select.js"
        ]

slickgrid-styles.scss文件代码：

@import './node_modules/angular-slickgrid/styles/sass/slickgrid-theme-bootstrap.scss';

在调查了我的代码之后，我终于找到了导致这个问题的路径。我在我的网格中使用了12列，其中我只想在页面加载时显示一些列，比如9列(用户可以检查网格菜单中的列以使其可见).For为此，我使用了以下代码：

setGridDefaultVisibleColumns() {
const visibleColumns = this.columnDefs.filter((c) => {
  return c['visible'] !== false;
});    
this.angularSilkGrid.slickGrid.setColumns(visibleColumns); }

我在angularGridReady中调用此方法

angularGridReady(angularGrid: AngularGridInstance) {
this.dataGrid = angularGrid.slickGrid;
this.angularSilkGrid = angularGrid;
this.setGridDefaultVisibleColumns();
 }

注释完setGridDefaultVisibleColumns函数调用后，我的问题就解决了

Answer 1

下面是issue.setColumns方法的解决方法，平滑网格也影响标题菜单。

我可以像下面这样隐藏列，而不会影响以下代码的headermenu.See

setGridDefaultVisibleColumns() {
this.columnDefs.forEach(c => {
  if (c['visible'] === false) {
    this.angularSilkGrid.extensionService.hideColumn(c);
  }
 }); this.angularSilkGrid.slickGrid.setColumns(visibleColumns);     
}