2017-08-18 37 views
0

我正在爲我的項目整合由akveo生成的ng2-data-table,並在切換列可視性的同時打了一個呃逆。 我跟着問題https://github.com/akveo/ng2-smart-table/issues/95爲列設置可見性標誌,並在切換更新標誌但數據不在表中更新。 你能指出我缺少的東西嗎?如何在角度4切換ng2數據表中的列/ akveo 4

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

我已經使用角度-2-下拉-多選以檢索所選的cols的ID,而且已經使用LocalDataSource刷新上肘節源(),但仍然沒有運氣。

直播例如:https://ronit123321.github.io/procturV2/enquiry/manage

回答

0

發現問題的實際來源是設置對象不能被更新。

因此創建了一個名爲「settingUpdater」的虛擬設置並將所有屬性添加到它。現在在toggle功能中更新這個dummyObject並將值賦給實際設置。

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