如何在角度 4 中切换 ng2 数据表/akveo 中的列答案

【问题标题】：How to toggle column in ng2 data table/akveo in angular 4如何在角度 4 中切换 ng2 数据表/akveo 中的列
【发布时间】：2017-08-18 12:11:27
【问题描述】：

我正在为我的项目集成 akveo 的 ng2-data-table，并且在切换列可见性时遇到了问题。我按照问题https://github.com/akveo/ng2-smart-table/issues/95 为列设置可见性标志并在切换时更新标志，但表中的数据没有更新。你能指出我缺少什么吗？

HTML

 <div class="row table-control">
 <div class="col-md-6">
 <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search           
 for names..">
 </div>
 <div class="col-md-3">

 </div>
 <div class="col-md-3">
 <ss-multiselect-dropdown [options]="myOptions" [texts]="myTexts" 
 [settings]="mySettings" [(ngModel)]="optionsModel 
 (ngModelChange)="toggle($event)">
 </ss-multiselect-dropdown>        
 </div>
 </div>

 <div class="row">
 <ng2-smart-table [settings]="settings" [source]="rows"></ng2-smart-table>
 </div>

rows: any = [];
optionsModel: any[];
myOptions: IMultiSelectOption[];  
 settings = {
 mode: 'external',
 hideSubHeader: true,
 actions: {
  add: false, edit: false, delete: false, columnTitle: '', position: 'right'
 },
 columns: {
  enquiry_no: { title: 'Enquiry No', filter: false, show: true }, 
  name: { title: 'Name', filter: false, show: true }, 
 };

 constructor(private enquire: FetchenquirycampaignService) {
 this.enquire.getAllEnquiry().subscribe(data => {
  this.rows = data;
 })
 }

  toggle() {
  var item = this.optionsModel.pop();
  console.log(item);
  console.log(this.settings.columns[item].show);
  this.settings.columns[item].show = !this.settings.columns[item].show;
  console.log(this.settings.columns[item].show);
  }

我已经使用 angular-2-dropdown-multiselect 来检索所选列的 id，此外还使用 LocalDataSource 在 toggle() 上刷新源，但仍然没有运气。

现场示例：https://ronit123321.github.io/procturV2/enquiry/manage

【问题讨论】：

标签： angular typescript

【解决方案1】：

发现问题的真正根源是无法更新的设置对象。

因此创建了一个名为“settingUpdater”的虚拟设置并将所有属性添加到其中。现在在切换功能上更新这个 dummyObject 并将值分配给实际设置。

toggle() {
var item = this.optionsModel.pop();
this.settingUpdater.columns[item].show = !this.settings.columns[item].show;
this.settings = Object.assign({}, this.settingUpdater);
}

【讨论】：