如何在Angular 4中切换ng2数据表/ akveo中的列

Question

我正在为项目集成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>

TS

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来检索所选cols的id，而且已经使用LocalDataSource来刷新toggle（）上的源，但是仍然没有运气。

实时示例： https : //ronit123321.github.io/procturV2/enquiry/manage

Answer 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);
}