如何在ag-grid中将特定列的标题名称的一部分更改为小写

// custom-header.component.ts
import { Component } from '@angular/core';
import { IHeaderParams } from 'ag-grid-community';

@Component({
  selector: 'app-custom-header',
  template: `
    <div class="custom-header">
      {{ params.displayName | lowercase }}
    </div>
  `,
  styles: [`
    .custom-header {
      text-transform: capitalize;
    }
  `]
})
export class CustomHeaderComponent {
  params: IHeaderParams;
}

// app.component.ts
import { Component } from '@angular/core';
import { GridOptions } from 'ag-grid-community';
import { CustomHeaderComponent } from './custom-header.component';

@Component({
  selector: 'app-root',
  template: `
    <ag-grid-angular
      style="width: 500px; height: 200px;"
      class="ag-theme-alpine"
      [gridOptions]="gridOptions"
    ></ag-grid-angular>
  `
})
export class AppComponent {
  gridOptions: GridOptions = {
    columnDefs: [
      { headerName: 'Column Name', field: 'columnName', headerComponentFramework: CustomHeaderComponent }
      // 其他列定义...
    ],
    rowData: [
      // 行数据...
    ]
  };
}