0

我在 Angular 2 应用程序中使用 PrimeNG 数据表，我必须在路由更改时保留选择。目前，我正在设置应用程序状态，如下所示：

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);关闭选项卡会取消选择表条目，因此可以通过更改选定条目数组以编程方式更改选择。即使存在所需的数组，它也不会在路由更改后启动视图时自动选择条目。

是否有解决方法或任何方法可以在路线更改时保留数据表选择？

4

1 回答 1

0

发现了我的问题。我正在初始化在 DataTable[value]属性中使用的数组ngOnInit。因此，selection和value，在这种情况下，applicants数组基本上在每个视图初始化时都携带不同的对象（同时携带相同的数据）。

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

所以，解决方案是使用这个：

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

然后检查是否有申请人在场，如果没有，则设置appState为 init。

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

appState这通过从 获取它们并仅在需要时重新初始化它们来保留路由更改之前的相同数组。

于 2016-09-07T14:23:25.533 回答