Question

我想在代码中添加列模板。我正在创建一个基类，当屏幕尺寸较小（对于手机）时，在该行的末尾添加一个信息按钮，而在屏幕尺寸较大时（当在该行上单击较大时可以打开不会隐藏的侧面板）将其删除表格）。

我不想通过[columns]来传递列，而是使用html中的模板（更容易理解，设计者知道如何使用它）。

我正努力避免重复

的相同html

<ngx-datatable-column *ngIf="screenMedium" [width]="40" [sortable]="false" [canAutoResize]="false">
    <ng-template ngx-datatable-cell-template>
        <span class="fa fa-chevron-circle-right text-primary" style="font-size:20px;cursor:pointer;padding:3px 0"></span>
    </ng-template>
</ngx-datatable-column>

如果屏幕小于768像素，则“ screenMedium”为true。由于我将在不同的页面上放置20个左右的表，因此我不想维护此功能，而是希望一次在一个位置执行一次，并且由于它属于我的应用程序“响应”方面的一部分，因此它是自动的。

这是我的代码，不起作用：

 table: DatatableComponent;
  checkInfoButton(): void {
    var lastCol = this.table.columnTemplates.last;

    if (this.screenMedium == false) {
      if (lastCol.name == "info-button") {
        console.log('removing info button td!');
        // need to remove the button
        this.table.recalculate();
        let cols = this.table.columnTemplates.toArray();
        cols.pop();
        this.table.columnTemplates.reset(cols);
        this.table.recalculate();
      }
      return;
    } else if (lastCol.name == "info-button")
      return; // already present
    console.log('adding info button td!');
    let cols = this.table.columnTemplates.toArray();
    let col = new DataTableColumnDirective(cols[0].columnChangesService);
    col.name = "info-button";
    col.width = 40;
    col.canAutoResize = false;
    col.sortable = false;
    col.cellClass = 'fa fa-chevron-circle-right text-primary';
    //col.cellTemplate = '<span class="fa fa-chevron-circle-right text-primary" style="font-size:20px;cursor:pointer;padding:3px 0"></span>';
    this.table.columnTemplates.reset(cols);
    this.table.recalculate();
  }

我找不到从查询列表添加/删除的好方法，因此将其转换为数组，从错误中删除，然后将table.columnTemplates重置为更改后的数组。我也不确定如何在代码中添加cellTemplate，但这就是步骤2。

ngx-datatable在代码中添加列模板

0 个答案: