Angular 2でng-tableを使用する場合のチェックボックスの入力方法は？

Question

Angular 2でng-tableを使用してテーブルを作成するのは簡単ですが、テーブルの先頭にチェックボックスの列を入力して、特定の行が選択されるたびにそのデータも選択されるようにします。

Table.htmlは

<ng-table [config]="config" 
    (tableChanged)="onChangeTable(config)" 
    (cellClicked)="onCellClick($event)" 
     [rows]="rows" [columns]="columns">   
</ng-table> 

Table.tsが

@Component({ 
    moduleId: module.id, 
    selector: 'table', 
    templateUrl: 'table.component.html', 
    styleUrls: ['table.component.css'] 
}) 

export class TableComponent implements OnInit { 
public rows:Array<any> = []; 
public columns:Array<any> = [ 
{title: 'Fruits', name: 'Description', filtering: {filterString:  '', placeholder: 'Filter by description'}}, 
{title: 'Colour', name: 'Colour', sort: '', filtering: {filterString: '', placeholder: 'Filter by colour'}}, 
{title: 'Size', name: 'Size'} 
]; 

public config:any = { 
paging: true, 
sorting: {columns: this.columns}, 
filtering: {filterString: ''}, 
className: ['table-striped', 'table-bordered'] 
}; 

私は、この表のチェックボックスの機能を実装する方法について混乱していますが含まれていますが含まれています。角2にいくつかの知識を共有することができれば幸いです。

Answer 1

ng-tableはセルの内容としてhtmlをサポートしています。入力チェックボックスのhtmlをチェックボックス列の行データに入れます。

角型コンポーネントやディレクティブは純粋なHTMLだけではサポートされていません。純粋なHTML/JavaScriptで聞くことができるイベントをブロードキャストするチェックボックスを作成することはできます。

それが文書化されていないが、あなたがソースでこれを見ることができます：

https://github.com/valor-software/ng2-table/blob/development/components/table/ng-table.component.ts

注この場合sanitizeが本当にサニタイズの反対であること - それは関係なく、内部にあるもののように安全なHTMLマーク。これはあなたが望むものには良いことです（他の状況では危険かもしれませんが）。