AG-Grid Angular 6 m 多线接头答案

【问题标题】：AG-Grid Angular 6 m Multiple Line headerAG-Grid Angular 6 m 多线接头
【发布时间】：2019-01-24 05:05:30
【问题描述】：

我实际上是在尝试在标题中创建一个带有 2 行文本的 ag-grid。

例如，我有 10 列标题为“姓名”、“地址”、“出生日期”和其他详细信息。对于“DOB”，我想在标题本身的“DOB”下方显示日期格式。到目前为止，我已经尝试了来自how to wordwrap a header in ag-grid 的 'DOB
(mm-dd-yyyy)' 和一些 css 样式，但对我没有任何效果。

是否有任何选项可以在不创建自定义标头组件的情况下实现此目的？

谢谢！

【问题讨论】：

标签： angular angular6 ag-grid ag-grid-ng2

【解决方案1】：

好吧，我得到了解决方案，我直接将 html 放入带有内联样式的 headername 中，并且它起作用了。

【讨论】：

我也面临同样的问题。你能分享一下代码吗？
它已经很久了，但我猜它只是 headername 属性中的 html 代码。可能是 headerName='
date

另一个 div
'

【解决方案2】：

嗯，这是我得到的解决方案

创建一个自定义组件，例如 custom-header

@Component({
selector: 'app-custom-header',
template: `
<div>
<div class="customHeaderLabel">{{headerName}}<br>{{subHeaderName}}</div> 
</div>
`
})
export class CustomHeader {
private params: any;
private headerName:string;
private subHeaderName:string;


agInit(params): void {
this.params = params;
this.headerName = params.displayName.split('-')[0];
this.subHeaderName = params.displayName.split('-')[1];
}
}

在声明列定义的主组件中使用此自定义组件

并且还在主组件中将标题名称声明为日期-（dd-mm-yyyy）（以'-'分隔）

【讨论】：

问题具体说is there any option to achieve this without creating custom header components?