将“切换列”图标更改为文本

Question

我正在使用Angular 7和VMWare的Clarity Datagrid。有没有一种方法可以将Datagrids页脚中的“显示/隐藏列”按钮更改为“显示/隐藏列”，而不是显示“列”图标？

我注意到，使用以下代码单击图标后，可以在对话框中更改标题和按钮文本，但是，我不确定如何将列图标更改为文本。

<clr-dg-column-toggle>
  <clr-dg-column-toggle-title>Show Columns</clr-dg-column-toggle-title>
  <clr-dg-column-toggle-button>Select All</clr-dg-column-toggle-button>
</clr-dg-column-toggle>

Answer 1

当前无法实现，该图标位于数据网格内部。从理论上讲，您可以重载指令，并使用自定义指令自己重写内容，我没有时间尝试和实现。

Answer 2

我已经解决了这一问题，方法是在Datagrid外部添加一个按钮并触发页脚中的按钮单击：

在HTML中：

<button (click)="showHideColumns();">Show/Hide Columns</button>

在组件TypeScript中：

showHideColumns()
{
  var el = <HTMLElement>document.querySelector(".column-switch-wrapper").firstElementChild;
  el.click();
}