2017-02-15 5 views
1

データページ設定と行選択が有効になっているTeradata Covalent Data Tableコンポーネントを使用しているAngular2 Webアプリケーションがあります。一度にすべての行とは対照的に、小さな塊でREST APIを介してデータが取得されるため、行の選択は前と後のページ区切りで自動的には行われません。すなわち、ページ1の行を選択した後、ページ2にナビゲートし、ページ1に戻ると、ページ1の選択された行は強調表示されない。Angular2 Teradata共有データテーブルrowSelect問題

blah.component.htmlファイルのテンプレートエントリで処理できるか、blah.component.ts(TypeScript)ファイルで何かをする必要があるかどうかはわかりません。

私は、行が選択され選択解除されると、選択された行の一意のIDを数値配列に記録しています。 .tsファイル - > selectedItems:number [];

は、ここでのデータテーブルのHTMLコードです:

<td-data-table [data]="items.content" [columns]="columns" [sortable]="true" [sortBy]="sortBy" [sortOrder]="sortOrder" [selectable]="true" [multiple]="true" (sortChange)="sort($event)" (rowSelect)="selectRow($event)" (selectAll)="selectAllRows($event)"> 
<template tdDataTableTemplate="matchCount" let-value="value" let-row="row" let-column="column"> 
    <div layout="row"> 
     <span flex>{{value | number:0}}</span> 
    </div> 
</template> 
<template tdDataTableTemplate="itemSize" let-value="value" let-row="row" let-column="column"> 
    <div layout="row"> 
     <span flex>{{value | bytes}}</span> 
    </div> 
</template> 

+0

の[(ngModel)] = "selectedRows" を追加しようとすると、このアレイは自動的にアレイから選択された行を追加し、削除します。あなたがサーバーサイドページネーションをしていないなら、その作業はうまくいきます。私はこのサーバーサイドページネーションをチェックしていない。 –

+0

感謝の言葉Vinayに非常に感謝します。私は実際にこの質問を投稿した直後に、正確なコードスニペットを追加しました。選択された行は実際には 'selectedRows'変数に追加され追跡されますが、ページングの前後でUIが以前の選択肢の情報で更新されません。私はそれが完全なデータセットをページングするのではなく、各ページイベントで小さなデータのサブセットを読み込んでいるのではないかと思っています。 – user1946444

答えて

3

私はギッターのTeradata /共有チャットグループに伸ばして、彼らは私を助けることができました。 selectedRowsの値と新しいデータセットの値をループして、一致するものを探すだけです。一致するものが見つかった場合は、それを.spliceを使用してselectedRowsから削除し、データセットから再度追加します。実際にはngmodelを手動で更新するだけです。

this.selectedRows.splice(parseInt(x),1,this.newRow.content[y]);

+0

あなたの答えを共有していただきありがとうございます。 –