有没有办法将徽章添加到 Ignite 网格的列标题？答案

【问题标题】：Is there a way of adding Badge to the column header of an Ignite grid?有没有办法将徽章添加到 Ignite 网格的列标题？
【发布时间】：2024-05-01 14:55:02
【问题描述】：

我有一个 5 列的 ignite 网格。其中一列显示客户是否有权订购某物。基本上它是三个字符串之一：

待批准
已批准
未经授权。

我想要做的是跟踪待处理的批准数量。为此，我想添加一个带有列标题的徽章组件，该组件显示待处理的批准数量。有可能吗？

我环顾四周，但找不到合适的解决方案。 Angular 库的 Ignite UI 确实有一个徽章组件，但找不到将它与数据网格一起使用的方法

【问题讨论】：

标签： angular badge ng-template ignite-ui igx-grid

【解决方案1】：

是的，有两种方法可以设置标题模板，通过输入 - API documentation of headerTemplate.。或者使用igxHeader 指令

代码 sn-p - 输入：

<igx-column field="ID" [headerTemplate]="pinTemplate"></igx-column>

...

<ng-template let-column #pinTemplate>
    <span style="float:left">{{column.header || column.field}}</span>
    <igx-badge type="success" icon="chat_bubble"></igx-badge>
    <igx-icon fontSet="material"(click)="pinColumn(column)">lock</igx-icon>
</ng-template>

代码 sn-p - 指令：

<igx-column field="Missing">
      <ng-template igxHeader let-column>
         {{ column.field }} {{ column.visibleIndex }}
      </ng-template>
</igx-column>

【讨论】：