在Angular 2中使用ng-table时如何输入复选框？

Question

To create a table using ng-table in Angular 2 is simple however now I want to input checkbox column in the front of the table so that whenever a particular row is selected, its data would be selected too.

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

我对如何在此表中实现复选框功能感到困惑。如果您能分享一些关于 Angular 2 的知识，我们将不胜感激。

Answer 1

ng-table 支持 html 作为单元格内容。将输入复选框的 html 放在复选框列的行数据中。

虽然它不支持 Angular 组件或指令——只支持纯 HTML。您仍然可以创建一个复选框来广播您可以使用纯 HTML/JavaScript 收听的事件。

它没有记录，但你可以在源代码中看到：

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

请注意，sanitize 在这种情况下实际上与 sanitize 正好相反——它将 HTML 标记为安全，无论里面是什么。这对您想要的有好处（尽管在其他情况下可能不安全）。