角2 ngx-数据表单元模板

Question

我正试图在ngx (https://github.com/swimlane/ngx-datatable)中实现https://github.com/swimlane/ngx-datatable，但不知道为什么它不能工作。

首先我的观点

<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
      }
    ....
   ];