即使將 enableHeaderMenu 選項設置為 true，Angular-Slickgrid 標題菜單也不可見

Question

我在我的角度應用程序中使用 Angular-Slickgrid。 網格工作正常，但我面臨 Headermenu 的問題。 當我運行應用程序時，無法在任何標題中的鼠標懸停上看到 Headermenu 圖標。

我正在使用以下 gridoptions ：

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 列（用戶可以從網格菜單中檢查列以使其可見）。為此，我使用以下代碼：

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

以下是問題的解決方法。光滑網格的 setColumns 方法也影響標題菜單。

我可以在不影響標題菜單的情況下隱藏如下所示的列。請參閱下面的代碼

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