ルート変更時のPrimeNG DataTableの選択を維持する

Question

私は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> 

私はコンストラクタでさえそうの​​ようにそれを設定し、ngOnInit `中にselectedApplicants配列を取得するためにthis.appState.get('selectedApplicants')メソッドを使用してみました：中

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

コンポーネント

ただし、選択した応募者の配列は返されますが、テーブル自体では選択されません。

注釈として、タブを閉じるときにthis.selectedApplicants.splice(event.index, 1);を実行すると、テーブルエントリの選択が解除されるため、選択したエントリの配列を変更することによって選択をプログラムで変更することができます。必要な配列が存在していても、ルート変更後にビューを開始するときには、エントリを自動的に選択しません。

ルート変更時にデータテーブルの選択を維持する方法がありますか？

Answer 1

私の問題が見つかりました。 ngOnInitの間に、DataTable [value]属性で使用されていた配列を初期化していました。したがって、selection,value、この場合はapplicantsの配列はすべて、すべてのビューの初期化で基本的に異なるオブジェクト（同じデータを保持しながら）を保持していました。

私がこれまでに行ったことは、オブジェクトselectedApplicantsの配列をselectionとvalueの配列にプッシュすることでした。それがうまくいったのですが、テーブルの配列をクリアして保存したオブジェクトをアプリ状態からプッシュできるようにするには、2つのループを実行する必要はありませんでした。それは2〜3つのオブジェクトではひどいことではありませんでしたが、それ以上対処しなければならないと、アプリのパフォーマンスが大幅に低下しました。

ので、解決策は、この使用していた：

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

をそして、本願出願があるかどうかを確認し、そうでない場合のinitにappStateを設定します。

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

これはappStateからそれらを取得することにより、経路変更前から同じ配列を維持し、それが必要とする場合にのみ、それらを再初期化します。