header 中的 SelectAll 復選框在使用 p-tableHeaderCheckbox 和 p-table 時移至下一頁時應取消選中

Question

我正在使用具有<p-tableHeaderCheckbox></p-tableHeaderCheckbox> <p-table> > 來選中和取消選中該復選框。 一切正常，但是當我移到表格中的下一頁時，一切都未選中，但仍選中了 selectAll 選項。 如何取消選中 header 復選框。

 <p-table #dtGrid [columns]="staticColumns" [value]="serviceIdData" [styleClass]="'table'" scrollHeight="{{scrollHeight}}" [rows]="10" [paginator]="true" (onRowSelect)="onRowSelect($event)" [pageLinks]="3" (onRowUnselect)="onRowUnselect($event)" [rowsPerPageOptions]="[10,25,50,100]" styleClass="table-light" (onHeaderCheckboxToggle)="handleHeaderCheckboxToggle($event)" [scrollable]="true" [lazy]="true" [(selection)]="selectedRecords" (onLazyLoad)="onLazyLoad($event);" [totalRecords]="totalRecords" scrollHeight="450px" [responsive]="true"> <ng-template pTemplate="colgroup" let-columns> <colgroup> <col *ngFor="let col of columns" [ngStyle]="{'width': col.width}"> </colgroup> </ng-template> <ng-template pTemplate="header" let-columns> <tr> <th role="columnheader" style="width:20px;"> <p-tableHeaderCheckbox></p-tableHeaderCheckbox> </th> <th *ngFor="let col of columns" [pSortableColumn]="col.fieldName" (click)="placeSortIcon()"> <div> <span pTooltip={{col.tooltip}} tooltipPosition="top" [innerHtml]="col.label" [ngClass]="'ui-column-title'"></span> <span *ngIf="dtGrid.sortField === col.fieldName" class="fa" [ngClass]="{'fa-sort-desc': dtGrid.sortOrder === -1, 'fa-sort-asc': dtGrid.sortOrder === 1}"></span> </div> </th> </tr> </ng-template> <ng-template pTemplate="body" let-columns="columns" let-data> <tr [pSelectableRow]="data" [pSelectableRowDisabled]="data.moved"> <td class="rowDataStyle" style="width:20px;"> <span *ngIf="data.moved"><img name="loading" src="assets/images/lock.png"></span> <p-tableCheckbox [value]="data" [hidden]="data.moved" [disabled]="data.moved" binary="data.selected"></p-tableCheckbox> <.-- {{data,selected}}. {{data.moved}} --> </td> <td *ngFor="let column of columns"> <span [ngClass]="'ui-cell-data'"> {{data[column.fieldName]}}</span> </td> </tr> </ng-template> <ng-template pTemplate="emptymessage" let-columns> <tr> <td [attr.colspan]="columns.length"> No records found </td> </tr> </ng-template> </p-table>

復選框仍然選中移動到下一頁，單擊此查看 output 表的屏幕截圖

Answer 1

 // Declair variables checkBoxSelection = []; checkBoxSelectionOldStore = []; // put after serviceIdData variable ex. blelow // After API Success this.serviceIdData = response.data; this.checkBoxSelection = _.cloneDeep(Array(Number((this.totalRecords/e.rows).toFixed())).fill([])); this.checkBoxSelection = this.checkBoxSelectionOldStore.length? _.cloneDeep(this.checkBoxSelectionOldStore): this.checkBoxSelection; handleHeaderCheckboxToggle($event: any) { const isChecked = $event.checked; this.selectedItems = []; this.checkBoxSelection[this.pageIndex] = isChecked? _.cloneDeep(this.items): []; this.onRowSelect(); } onRowSelect() { this.checkBoxSelectionOldStore = _.cloneDeep(this.checkBoxSelection); this.selectedItems = []; _.forEach(this.checkBoxSelectionOldStore, (value) => { if (value.length > 0) { _.forEach(value, (v) => { this.selectedItems.push(v); }); } }); } // finally Your selected records in this.selectedItems

 <p-table [value]="serviceIdData" (onHeaderCheckboxToggle)="handleHeaderCheckboxToggle($event)" [(selection)]="selectedRecords" (onLazyLoad)="onLazyLoad($event);" [totalRecords]="totalRecords" (onRowSelect)="onRowSelect()" [(selection)]="checkBoxSelection[pageIndex]"> </p-table>