2017-01-30 12 views
0

Я пытаюсь обобщить создание сетки Telerik с угловым2. в моем component.ts у меня есть:Telerik angular2 Grid Template switch

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> 

Я хотел бы применить другая обработка для каждого столбца. как я могу применить ngSwitch в этом случае после шаблона ngFor. Я попробовал несколько путь как добавление <span [ngSwitch]="col.name", {{"col.name"}} или

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

но безрезультатно.

ответ

0

Я, наконец, нашел способ и разместил для других.

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