使用ngTemplateOutlet时,不会显示kendo-grid中的多列标题

时间:2018-11-30 11:58:19

标签: javascript angular kendo-ui kendo-grid kendo-ui-angular2

此代码可以完美运行并显示a multicolumn header

<ng-template #recursiveGroup ngFor [ngForOf]="headers" let-header>
    <kendo-grid-column-group [title]="header.title">
        <ng-template *ngIf="header.columns" ngFor [ngForOf]="header.columns" let-column>   
            <!--<ng-template 
                    [ngTemplateOutlet]="reusable"
                    [ngTemplateOutletContext]="{column:column}">
            </ng-template>-->
            <kendo-grid-column                     
                    field="{{column.field}}"
                    title="{{column.title}}"
                    >
            </kendo-grid-column>                     
        </ng-template>
    </kendo-grid-column-group>
</ng-template>

enter image description here

如果我使用以下方式书写:

<ng-template #recursiveGroup ngFor [ngForOf]="headers" let-header>
    <kendo-grid-column-group [title]="header.title">
        <ng-template *ngIf="header.columns" ngFor [ngForOf]="header.columns" let-column>   
            <ng-template 
                    [ngTemplateOutlet]="reusable"
                    [ngTemplateOutletContext]="{column:column}">
            </ng-template>
            <!--
            <kendo-grid-column                     
                    field="{{column.field}}"
                    title="{{column.title}}"
                    >
            </kendo-grid-column> 
            -->
        </ng-template>
    </kendo-grid-column-group>
</ng-template>

<ng-template #reusable let-column="column"  let-ch="ch" let-headerTitle="headerTitle">
    <kendo-grid-column                     
            field="{{column.field}}"
            title="{{column.title}}"
            >
    </kendo-grid-column>                     
</ng-template>

那么就没有多头文件了:

enter image description here

当我使用ngTemplateOutlet时,没有多列标题。

是否可以同时使用ngTemplateOutlet<kendo-grid-column-group/>

0 个答案:

没有答案