Angular 通过围绕剑道角度网格的包装器添加多个标题

我正在尝试在剑道角度网格中添加一个多标题，如下所示：

我们有一个围绕剑道角度网格的包装器和一个通用标记。使用包装器的大多数位置都不需要多个标头

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

{{column.title}}

如果我们需要添加多标题：

选项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>

//剑道网格列的Html在这里
//剑道网格列的Html在这里

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

<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>

选项3：使用ngTemplateOutlet提取剑道网格列html 不支持，如中所述：

方案1和方案2吸引力不大，方案3也不可能

有没有其他方法可以做到这一点