angular - 通过围绕 Kendo Angular Grid 的包装器添加多个标头

Question

我正在尝试在 Kendo 角度网格中添加一个多标题，如下所示：https ://www.telerik.com/kendo-angular-ui/components/grid/columns/headers/

我们有一个围绕 Kendo Angular Grid 的包装器和一个通用标记。大多数使用包装器的地方都不需要多个标头。

列包装器中的当前标记如下：（简化）

<kendo-grid-column *ngFor="let col of dataOptions.columns; trackBy: trackByColumnField">
   <ng-template kendoGridHeaderTemplate let-column>
        {{ column.title }}
   </ng-template>

如果我们需要添加多头：

选项 1： 添加单独的 html 以在需要的地方添加顶部标题

<ng-container *ngIf='dataOptions.columnGroups && dataOptions.columnGroups.length > 0'>
    <ng-container *ngFor="let obj  of dataOptions.columns | groupBy: '_groupKey'; trackBy: trackByColumnField">
        <kendo-grid-column-group [title]="obj.key | translate">
            <ng-container *ngFor="let col of obj.value; trackBy: trackByColumnField">
                   // Html for kendo-grid-column goes here 
                </ng-container>
            </ng-container>
        </kendo-grid-column-group>
    </ng-container>
</ng-container> 

<ng-container *ngIf="!dataOptions.columnGroups">
    <ng-container *ngFor="let col of dataOptions.columns; trackBy: trackByColumnField">
                   // Html for kendo-grid-column goes here 
        </ng-container>
    </ng-container>
</ng-container>

选项 2：为所有网格添加顶部标题并在需要时使用 css 隐藏

选项 3：使用 ngTemplateOutlet 提取 kendo-grid-column html 不支持，如：https ://www.telerik.com/forums/dynamic-multi-column-headers

选项 1 和选项 2 不是很有吸引力，选项 3 是不可能的。

有没有其他方法可以实现？

标签： angularkendo-uikendo-grid