如何使用angular在ag-grid中包装列标题

Question

我有一些专栏有四个字,即预交易跟进,交易后跟进,其中一些有三个字.我尝试了下面的css将文本换行到多行.

::ng-deep .ag-theme-material .ag-header-cell-label .ag-header-cell-text{
  white-space: normal;
  overflow-wrap: break-word;
}

HTML

<ag-grid-angular class="ag-theme-material" [rowData]="rowData" [columnDefs]="columnDefs" [overlayLoadingTemplate]="overlayLoadingTemplate" [domLayout]="domLayout" [enableSorting]="true" (gridReady)="onGridReady($event)" (gridOptions)="gridOptions" >
  </ag-grid-angular>

但列标题保持不变.我想将列标题文本包装成多行.反正有没有这样做？

注意:我可以使用包装内容cellStyle: {'white-space': 'normal'}

{headerName: 'headername', field: 'headerfield', autoHeight:true, width: 100, cellStyle: {'white-space': 'normal'}},

但我想包装标题.

Answer 1

请查看以下stackblitz示例。

https://stackblitz.com/edit/angular-ag-grid-angular-xmbm3p?embed=1&file=styles.css

在全局样式表中，我应用了以下内容...您可以::ng-deep在组件css中使用，这是我可以通过ag-gridfork 找到的第一个stackblitz ，它不是我的，因此没有组件css可以使用。

.ag-header-cell-label .ag-header-cell-text {
  white-space: normal !important;
}

下一块是使用属性 headerHeight

this.gridOptions = <GridOptions>{
          headerHeight:75,

不幸的是，这部分是不可避免的...它也不允许您根据自动换行要求使标题高度动态化。

• 原因是在top渲染视图时，内容区域是用样式动态定义的；调整标头的高度::ng-deep不会top通过headerHeight属性值将内容区域向下 动态移动...如果未定义，则默认值为，25px因此topfor内容区域也为25px。
• 更不用说当您使用::ng-deep.. 更改高度时，内容区域的z-index导致其与标题重叠，因此您不知道是否::ng-deep真正有效...在视觉上就是...随着标题在...下方延伸内容区域。

抱歉地说，但是这将尽可能地接近...调整所有元素，top通过DOM操作基于动态标头高度向下移动等，我担心这会变得太丑了...如果需要标头高度动态的，这是一个表演的终结者...最好探索其他选择来代替ag-grid。

https://www.ag-grid.com/javascript-grid-column-header/#headerHeight