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

Question

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

我的代码：

{ 字段：“id”， header姓名：'RAJ(0P)' }

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

任何建议都会有所帮助。

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

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

Answer 1

您尝试过使用 angular 管道吗？

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

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

参考link在这里TitleCasePipe

Answer 2

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

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

{
      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.

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

How to change a part of the header name of a particular column to lowercase in ag-grid

typescript

ag-grid

angular