2016-08-22 80 views
0

我在Angular 2应用程序中使用PrimeNG数据表,我必须坚持选择路线变化。目前,我设置应用程序的状态,像这样:坚持PrimeNG DataTable选择路线变化

onTableRowStateChange() { 
    this.appState.set('selectedApplicants', this.selectedApplicants); 
} 

哪里APPSTATE是保存选择状态的服务。这也被用来坚持一些选择开启的标签。

虽然appState设置正确,但会返回一个选定的应用程序数组并保留打开的选项卡,但它不会在数据表中保留实际选择,因此可以再次选择条目。

的HTML看起来像这样:

<p-dataTable tableStyleClass="table" [value]="applicants" 
       [(selection)]="selectedApplicants" 
       (onRowSelect)="onTableRowStateChange()" 
       (onRowUnselect)="onTableRowStateChange();"> 
     <header>Applications</header> 
     <p-column [style]="{'width':'38px'}" selectionMode="multiple"></p-column> 
     <p-column *ngFor="let col of cols" [field]="col.field" [header]="col.header"></p-column> 
</p-dataTable> 

我试图用一个this.appState.get('selectedApplicants')方法来获得在`ngOnInit的selectedApplicants阵列,在构造函数中,甚至设置它像这样:在

selectedApplicants:any[] = (this.appState.get('selectedApplicants').length > 0) ? this.appState.get('selectedApplicants') : this.appState.set('selectedApplicants', []); 

组件。

但是,虽然它返回所选应用程序的数组,但它不会在表中选择它们。

作为一个方面说明,在关闭标签时做this.selectedApplicants.splice(event.index, 1);可以取消选择表格条目,所以可以通过改变选定的条目数组来编程改变选择。即使存在所需的数组,它也不会在路由更改后启动视图时自动选择条目。

是否有解决方法或任何方式来坚持路线变化的数据表选择?

+0

我想让PrimeNG组件在Plnkr中工作。一旦我这样做,我可能会给你一个答案。 –

回答

0

发现我的问题。我正在初始化数组,该数组在ngOnInit期间用于DataTable [value]属性中。因此,selection,value和在这种情况下的applicants阵列基本上在每个视图初始化时都携带不同的对象(同时携带相同的数据)。

我之前所做的是将selectedApplicants阵列中的对象推入表selectionvalue阵列。虽然它确实有效,但在清除表格阵列并将保存的对象从应用程序状态推送到它们之前,必须先执行两个forEach循环,这不是一个好的选择。这对于二三个对象来说并不可怕,但是如果我不得不处理更多的事情,它会极大地减慢应用程序的速度。

因此,解决方案是使用这样的:

applicants:any[] = (this.appState.get('applicants').length > 0) ? this.appState.get('applicants') : this.appState.set('applicants', this.getApplicants()); 

然后检查是否有存在的申请人和初始化设置appState,如果他们不。

if (this.appState.get('applicants').length < 1) { 
    this.appState.set('applicants', this.getApplicants()) 
} 

这从appState并让他们保持了相同的阵列从路由改变之前重新初始化它们只在需要的地方。