ngx-datatable столбец переключения / показать / скрыть проблему - PullRequest
Новая
       12

ngx-datatable столбец переключения / показать / скрыть проблему

1 голос
/ 16 мая 2019

Я использовал функцию переключения столбцов ngx-datatable, чтобы показать / скрыть columsn. У меня есть столбец, который имеет флажок, не должен быть затронут при использовании функции переключения, но для моего случая он исчез. Как исправить эту проблему.

Ниже приведен 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;
});}

Я не хочу скрывать первый столбец (chkBox) в функции переключения show / hide в ngx-datatable. Как этого добиться?

...