如何在Angular 12的@tusharghoshbd ngx-datatable中隐藏列？——id列visible:false失效问题求解

问题场景 #

我在Angular 12项目中使用@tusharghoshbd ngx-datatable包，当前已经定义了列配置，想要隐藏key: 'id'的列（仅保留该列数据用于编辑和删除操作的路由跳转），但尝试添加visible: false属性后并未生效，请问该如何实现？

当前代码 #

组件TypeScript代码

this.columns = [
 { key: 'id', title: '<div class="blue"> ID</div>', width: 60, sorting: true, align: { head: 'center', body: 'center' }, vAlign: { head: 'bottom', body: 'middle' }, cellTemplate: this.idTpl },
 { key: 'first_name', title: '<div class="blue">First Name</div>', width: 100 },
 { key: 'last_name', title: '<div class="blue">Last Name</div>', width: 100 },
 { key: 'active', title: '<div class="blue">Active</div>', align: { head: 'left' }, width: 100, sorting: true, },
 { key: '', title: '<div class="blue">Action</div>', align: { head: 'center', body: 'center' }, sorting: false, width: 80, cellTemplate: this.actionTpl }
];

HTML模板代码

<ngx-datatable tableClass="table table-striped table-bordered table-hover" [data]="userInfoList" [columns]="columns" [options]="options">
 <ngx-caption>
 <div class="row">
 <div class="col-sm-6 col-xs-6 col-6 ">
 <b>
 <i class="fa fa-table" aria-hidden="true"></i> Site Info. List
 </b>
 </div>
 </div>
 </ngx-caption>
 <ng-template #addressTpl let-row let-rowIndex="rowIndex" let-columnValue="columnValue">
 </ng-template>
 <ng-template #actionTpl let-row let-rowIndex="rowIndex" let-columnValue="columnValue">
 </ng-template>
</ngx-datatable>

解决方案 #

问题出在属性名的使用上——@tusharghoshbd ngx-datatable并不支持visible: false来控制列的显示隐藏，而是使用hidden: true属性。

只需要修改id列的配置，添加hidden: true即可：

this.columns = [
 { 
   key: 'id', 
   title: '<div class="blue"> ID</div>', 
   width: 60, 
   sorting: true, 
   align: { head: 'center', body: 'center' }, 
   vAlign: { head: 'bottom', body: 'middle' }, 
   cellTemplate: this.idTpl,
   hidden: true // 替换visible:false为hidden:true
 },
 { key: 'first_name', title: '<div class="blue">First Name</div>', width: 100 },
 { key: 'last_name', title: '<div class="blue">Last Name</div>', width: 100 },
 { key: 'active', title: '<div class="blue">Active</div>', align: { head: 'left' }, width: 100, sorting: true, },
 { key: '', title: '<div class="blue">Action</div>', align: { head: 'center', body: 'center' }, sorting: false, width: 80, cellTemplate: this.actionTpl }
];

效果说明 #

• 该列会在页面上完全隐藏，不会占用表格宽度或显示任何内容
• row.id的数据依然会被保留，完全不影响你在actionTpl中使用该值进行编辑、删除的路由跳转操作

内容的提问来源于stack exchange，提问作者user11352561