角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-データテーブルは

checkboxableを有しています。選択モードがチェックボックスの場合のみ適用されます。

だから、あなたの列はチェックボックスであるはずです。 第二に、 あなたは本当にあなたが有効なコンポーネントを作成する必要がconponentとカスタムテンプレートが必要な場合、あなたはその後、セル内で使用されるテンプレートに含めることができます。

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