ngx-datatable列切换显示/隐藏问题

时间:2019-05-16 12:13:46

标签: angular ngx-datatable

我使用了ngx-datatable列切换功能来显示/隐藏列。我有一个带有复选框的列,在使用切换功能时不应受到影响,但就我而言,它消失了。如何解决此问题。

下面是使用的html代码

 <ngx-datatable>      
  <ngx-datatable-column [width]="30" [resizeable]="false" [sortable]="false" [draggable]="false" [canAutoResize]="false" [name]='chkBox'>
       <ng-template ngx-datatable-header-template let-value="value" let-allRowsSelected="allRowsSelected"
          let-selectFn="selectFn">
          <input type="checkbox" [checked]="allRowsSelected" (change)="selectFn(!allRowsSelected)" />
        </ng-template>
        <ng-template ngx-datatable-cell-template let-value="value" let-isSelected="isSelected"
          let-onCheckboxChangeFn="onCheckboxChangeFn">
          <input type="checkbox" [checked]="isSelected" (change)="onCheckboxChangeFn($event)" />
        </ng-template>
   </ngx-datatable-column>
   <ngx-datatable-column prop="itemType" [name]='"Item Type"| translate'>
        <ng-template let-value="value" ngx-datatable-cell-template>
          {{value}}
        </ng-template>
   </ngx-datatable-column>
   <ngx-datatable-column prop="itemId" [name]='"Item ID" | translate'>
        <ng-template let-value="value" ngx-datatable-cell-template>
          {{value}}
        </ng-template>
   </ngx-datatable-column>
   <ngx-datatable-column prop="itemName" [name]='"Item Name"| translate'>
        <ng-template let-value="value" ngx-datatable-cell-template>
          {{value}}
        </ng-template>
   </ngx-datatable-column>
 </ngx-datatable>

下面是用于显示隐藏队列的代码

<div class='selected-column'>
  <h4>Available Columns</h4>
  <ul>
    <li *ngFor='let col of allColumns'>
      <input *ngIf="col.name!='chkBox'" 
        type='checkbox'
        [id]="col.name"
        (click)='toggle(col)'
        [checked]='isChecked(col)'
      />
      <label [attr.for]="col.name">{{col.name}}</label>
    </li>
  </ul>
</div>

toggle(col) {
if (col.name != "chkBox") {
  const isChecked = this.isChecked(col);
  if (isChecked) {
    this.columns = this.columns.filter(c => {
      return c.name !== col.name;
    });
  } else {
    const newColumns = [...this.columns, col];
    this.columns = [];
    this.allColumns.forEach((f) => {
      newColumns.forEach((s) => {
        if (s.name === f.name) {
          this.columns.push(f);
        }
      });
    });
  }
 } 
}
isChecked(col) {
return this.columns.find(c => {
  return c.name === col.name;
});}

我不想在ngx-datatable的show / hide切换功能中隐藏第一列(chkBox)。如何实现呢?

0 个答案:

没有答案