我使用了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)。如何实现呢?