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>

コンストラクターで `ngOnInit 中に配列this.appState.get('selectedApplicants')を取得するメソッドを使用して、次のように設定しようとしました。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

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

その前に行ったことは、オブジェクトをselectedApplicants配列からテーブルselectionとvalue配列にプッシュすることでした。forEachそれは機能しましたが、テーブルの配列をクリアし、保存されたオブジェクトをアプリの状態からそれらにプッシュする前に、2 つのループを実行する必要があるため、適切なオプションではありませんでした。2 ～ 3 個のオブジェクトに対してはそれほど問題ではありませんでしたが、それ以上のオブジェクトを処理する必要がある場合は、アプリの速度が大幅に低下していたでしょう。

したがって、解決策はこれを使用することでした：

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 に答える