如何在angular中使用ag-grid的headerClass属性？

Question

最近我在我的 angular 项目中添加了 a-grid 网格。

我想更改网格的 font-family 个 header。我知道有一个名为 headerClass 的属性，它是 header class 定义的地方。但是当我应用这个属性时，我的 header 字体系列没有任何变化。

是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>

这是我的 class:

.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' }
  ]
}

但是 header 栏的字体系列与我预期的不一样。

你有什么想法吗？

Answer 1

看下面link.

stackblitz-ag-grid-header-class

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

或者您可以将您的 css class 放入主 style.css/style.scss 文件

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

谢谢

如何在angular中使用ag-grid的headerClass属性？

How to use headerClass property of ag-grid in angular?

ag-grid

angular