ag-Grid 添加 css 类

Question

我对我的Angular 应用程序有一个简单的要求...即在展开或折叠一行时添加一个 css 类以突出显示该行。我尝试按照文档https://www.ag-grid.com/javascript-grid-row-styles/#gsc.tab=0 使用gridOptions.getRowClass，但这似乎没有效果。

我的html 我添加了一个事件处理程序，该处理程序将在行展开/折叠时触发一个方法。我的html 如下所示：

<ag-grid-angular #agGrid style="width: 100%; height:85vh" class="ag-material grid-Holdings" 
  [gridOptions]="gridOptions" 
  [rowData]="rowData"
  ... 
  (rowGroupOpened)="addRowClass($event)">
</ag-grid-angular>

...在我的 grid.component.ts 中，我有应该添加/删除 css 类的方法：

addRowClass(params) {
  this.gridOptions.getRowClass = (params) => {
    if (params.node.expanded) {
      return 'my-css-class';
    }
  }
}

一件有趣的事情是，当我在 Chrome 开发控制台中添加断点时，我发现它永远不会执行 return 'my-css-class' 但我在官方文档中找不到任何关于原因的信息。总的来说，我真的很挣扎 ag-Grid，尤其是 Angular 与 ag-Grid 的集成。如果这不起作用，最好以某种方式在 vanilla JS 中执行此操作...如果是这样，如果没有ag-Grid api，我怎么能做到这一点？

Answer 1

ag-grid 已经为您切换了一些 css 类：ag-row-group-expanded（展开时）和ag-row-group-contracted（未展开时）。您应该能够通过将必要的样式应用于这些类来实现您的目标。