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”的虚拟设置，并为其添加了所有属性。现在，在切换功能上更新此虚拟对象并将值分配给实际设置。

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

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

1 个答案: