如何在角度中使用 ag-grid 的 headerClass 属性？答案

【问题标题】：How to use headerClass property of ag-grid in angular?如何在角度中使用 ag-grid 的 headerClass 属性？
【发布时间】：2020-03-14 15:06:28
【问题描述】：

最近我在我的 Angular 项目中添加了a-grid grid。

我想更改网格标题的字体系列。我知道有一个名为headerClass 的属性，它是头类定义的地方。但是当我应用此属性时，我的标题字体系列没有任何变化。

是html文件：

<ag-grid-angular  style="width: 100%; height: 500px;"
                  class="ag-theme-blue"
                  [rowData]="gridOptions.rowData"
                  [columnDefs]="gridOptions.columnDefs"
                  [defaultColDef]="gridOptions.defaultColDef"
                  [enableRtl]="agGridPropeties.enableRTL"
                  [localeText]="localeTextPersian"
                  [rowSelection]="agGridPropeties.rowSelection"
                  [multiSortKey]="agGridPropeties.multiSortKey"
                  [pagination]="agGridPropeties.pagination"
                  [paginationPageSize]="agGridPropeties.paginationPageSize"
> 
</ag-grid-angular>

这是我的课：

.my-header-class {
  font-family: tahoma;
  font-weight:bold;
}

这是我的 ts 文件：

public gridOptions: any = {
  defaultColDef: {
    resizable: true,
    sortable: true,
    filter: true,
    headerClass: 'my-header-class'
  },

  columnDefs : [
    {headerName: 'Make', field: 'make'},
    {headerName: 'Model', field: 'model'},
    {headerName: 'Price', field: 'price'},
    {headerName: 'Country', field: 'country'},
  ],

  rowData : [
      { make: 'TOYOTA', model: 'Celica', price: 35000, country:'Japan'},
      { make: 'FORD', model: 'Mondeo', price: 32000, country:'USA'},
      { make: 'BENZ', model: 'C200', price: 100000, country:'Germany'},
      { make: 'LAMBORGHINI', model: 'Aventador', price: 350000, country:'Italy' }
  ]
}

但列标题字体系列与我预期的不一样。

你有什么想法吗？

【问题讨论】：

嗨 @AliMohammadi 将此 css 放入您的主 style.css 文件中，让我知道它是否有效？

标签： angular ag-grid

【解决方案1】：

请看下面的链接。

stackblitz-ag-grid-header-class

我只做了一处改动，添加了encapsulation: ViewEncapsulation.None来应用css。

或者你可以将你的 css 类放到你的主 style.css/style.scss 文件中

希望这对您有所帮助，如果您仍有问题，请告诉我。

谢谢

【讨论】：

太棒了。我没有找到任何关于它的文档。非常感谢，兄弟。
我无法在 stackblitz 示例中将文本对齐方式更改为右对齐，标题样式为 my-header-class 到 text-align: right; @kushal-shah 对齐文本有特殊要求吗？现在我正在使用headerClass: 'ag-left-aligned-header'，但如果 ag-grid 得到它无法识别的东西，它可能只是使用默认样式。（作为参考，我使用的是type: 'numericColumn'，但我希望标题标签左对齐而不是像单元格一样右对齐。