如何动态对齐 ag-grid-angular 标题

Question

我有一个角度为 6 的 ag-grid，并且动态附加了列和数据。现在我想动态对齐标题（在多标题的情况下，父母和孩子）。像第一列标题应该左对齐，其他的将居中对齐。

我尝试设置 cellStyle 和我找到的其他一些选项，但它们都不起作用

我尝试像这样实现它：

  let headerItem = {
    headerName: name,
    children: [
      {
        headerName: name,
        field: 'col' + i + '.value',
        hide: isHidden,
        pinned: pinned,
        cellStyle: function (params) {
          try {
            return {text-align : 'center'};
          } catch (e) {
            return null;
          }
        }
      }
    ],
    cellStyle: function (params) {
          try {
            return {text-align : 'center'};
          } catch (e) {
            return null;
          }
        }
  }

请指导我如何才能使它正常工作...

Answer 1

假设您使用的是最新（如果不是最新）版本的 Ag-Grid，如果我们想对标题单元格进行任何自定义，我们必须创建自定义 cell header components。

我已经使用了现有 Ag-grid 的样本，并为您创建了一个demo。 （自定义header模板参考app/custom-header.component.ts）

我所做的是为它创建了一个单独的组件，并将标题的模板设置为如下所示以垂直和水平对齐（我为此使用 CSS flexbox 属性）

<div style="display:flex;justify-content:center;align-items:center;">
  {{params.displayName}}
</div>