Angular 2 ngx-Datatable 单元格模板

Question

我正在尝试在 ngx-Datatable (https://github.com/swimlane/ngx-datatable) 中实现 cellTemplates，但不知道为什么它不起作用。

首先是我的观点

<ngx-datatable [rows]="skifte?.utsade" [columnMode]="flex" [selectionType]="'single'" [columns]="columns" (select)='edit($event)'></ngx-datatable>

我有一个这样的模板类。

import { Component, TemplateRef, ViewChild } from '@angular/core';
@Component({
moduleId: module.id,
selector:'',
template:"
<template #checkbox let-row="row" let-value="value" let-i="index">
    <md-checkbox checked="value === 'true'"></md-checkbox> 
</template>"
})
export class CellTemplates{

@ViewChild('checkbox') public checkbox: TemplateRef<any>;

constructor(){

 }    
}

并尝试像这样使用它。但是该单元格的样式没有变化。

@Component({
moduleId: module.id,
selector: 'dv-utsade-table',
templateUrl: 'UtsadeTableComponent.html'

})
export class UtsadeTableComponent extends InsatsComponentBase {

columns : any[];
constructor(private dialogService: DialogService) {
    super();
}
ngAfterViewInit(){
 window.setTimeout(() =>
     this.columns =  [{ name: 'Körning', prop: 'korning'  },
        { name: 'benamning' },
        { name: 'giva' },
        { name: 'areal' },  
        { name: 'Utförd', prop: 'utford', cellTemplate: new CellTemplates().checkbox } //<----Here,
        { name: 'datum' },
        { name: 'Huvudgröda', prop: 'huvudgroda' },
        { name: 'Gödsel', prop: 'godsel.benamning' },
        { name: 'Giva', prop: 'godsel.giva' }
        ]
    )
 }
}

Answer 1

首先 ngx-datatable 有

可复选框：布尔值

指示列是否应显示复选框组件 选择。仅在选择模式为复选框时适用。

所以你可以告诉它你的列应该是复选框。 第二， 如果您确实需要带有组件的自定义模板，则需要创建一个有效的组件，然后可以将其包含在要在单元格中使用的模板中：

<template #chkBxTmpl let-row="row" let-value="value" let-i="index">
  <checkbox-component [state]="value"></checkbox-component>
</template>

在组件中：

@ViewChild('chkBxTmpl') chkBxTmpl: TemplateRef:<any>; 
    ....
   this.columns = [
       ...
      {
        cellTemplate: this.chkBxTmpl, 
        prop: 'checked',
        name: 'checked',
        width: 100
      }
    ....
   ];