html - 使用 p-tableHeaderCheckbox 和 p-table 移动到下一页时，应取消选中标题中的“全选”复选框

Question

我正在使用 <p-table>其中有 <p-tableHeaderCheckbox></p-tableHeaderCheckbox>选中和取消选中复选框。一切正常，但是当我移动到表中的下一页时，所有内容都未选中，但仍然选中 selectAll 选项。如何取消选中标题复选框。

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

Checkbox still checked on moving to next page, click on this to see screenshot of the output table

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>