Telerik angular2 网格模板开关答案

【问题标题】：Telerik angular2 Grid Template switchTelerik angular2 网格模板开关
【发布时间】：2017-01-30 19:17:37
【问题描述】：

我正在尝试用 angular2 概括制作 Telerik Grid。在我的 component.ts 我有：

 private cols: Column[] = [
    { name: 'id', desc: 'ID' },
    { name: 'listen', desc: 'Listen' },
    { name: 'station', desc: 'Station' },
    { name: 'location', desc: 'Location' },
    { name: 'type', desc: 'Type' },

];

并正确获取数据（我尝试不使用大小写并且工作正常）然后在我的模板 html 中：

<kendo-grid [data]="gridPager">
<template *ngFor="let col of cols" let-col>
</template>
</kendo-grid>

我想对每一列应用不同的处理。在这种情况下，如何在 ngFor 模板之后应用 ngSwitch。我尝试了几种方法，例如添加<span [ngSwitch]="col.name", {{"col.name"}}or

<template *ngFor="let col of cols" let-col>
        <kendo-grid-column [ngSwitch]="col.name">
            <template *ngSwitchCase="'listen'" kendoGridCellTemplate let-dataItem let-column>
                <button kendoButton (click)="open(dataItem)" style="width:180">{{dataItem.station.text}}</button>
            </template>
            <template *ngSwitchDefault kendoGridCellTemplate let-dataItem let-column>
            </template>

        </kendo-grid-column>
    </template>

但无济于事。

【问题讨论】：

标签： angular telerik-grid

【解决方案1】：

我终于找到了方法，并为其他人发帖。

<template ngFor [ngForOf]="cols" let-col>
        <kendo-grid-column field="{{col.name}}" title="{{col.desc}}" [ngSwitch]="col.name" [sortable]="col.name!='listen'">
            <template kendoGridCellTemplate let-dataItem let-column *ngSwitchCase="'listen'">
                <button kendoButton (click)="open(dataItem) " style="width:180">{{dataItem.station.text}}</button>
            </template>
            <template kendoGridCellTemplate let-dataItem let-column *ngSwitchCase="'station'">
                <a href="{{dataItem.station.href}}" target="_new">{{dataItem.station.text}}</a>
            </template>
        </kendo-grid-column>
    </template>

【讨论】：