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

【问题标题】：How to change a part of the header name of a particular column to lowercase in ag-grid如何在ag-grid中将特定列的部分标题名称更改为小写
【发布时间】：2020-12-22 09:40:33
【问题描述】：

我尝试使用 headerClass，但它将整个标题名称转换为小写，但只希望其中一部分为小写。

我的代码：

{ 字段：“id”， headerName: 'RAJ(0P)' }

我只希望 0P 部分变成小写。

任何建议都会有所帮助。

更新：我看到一个类被应用于将文本转换为大写的外部组件。所以要覆盖它，我想我需要将自定义 HTML 传递给列标题并应用一个将其转换为小写的类。

那么如何将自定义 HTML 传递给列标题？

【问题讨论】：

标签： angular typescript ag-grid

【解决方案1】：

您可以使用headerValueGetter 回调函数来设置您想要的标题文本格式。您需要将其添加到列定义中。

针对您的具体问题，可以使用以下列定义（如果没有重构，请见谅，速写）：

{
      field: "RAJ(0P)",
      headerValueGetter: function(params) {
        let headerName = params.colDef.field;
        let textWithinBracket = headerName.substring(headerName.indexOf('(') + 1, headerName.indexOf(')'));

        let lcTextWithinBracket = '(' + textWithinBracket.toLowerCase() + ')';

        let finalHeaderName = headerName.replace(/\(.*?\)/, lcTextWithinBracket)

        return finalHeaderName;
      }
    }

Demo.

【讨论】：

@RajatAggarwal 我的回答仍然适用。您的更新提出了一个新问题。
@RajatAggarwal，您尝试过 Viquas 的答案吗？我觉得不错

【解决方案2】：

您是否尝试过使用角管？

当您在 html 模板中显示值时，比如说span，您可以执行以下操作以使您的值大写

<span>{{ value_expression | titlecase }}</span>

参考链接在这里TitleCasePipe

【讨论】：

他们明确表示他们只希望部分名称大写
哦，我认为例如“RAJ”必须变为“Raj”，而这正是 titlecase 管道的作用。如果我能读懂就更好了。