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

在使用p-tableHeaderCheckbox和p-table时，当移动到下一页时，标题中的SelectAll复选框应取消选中。

p-tableHeaderCheckbox是PrimeNG框架中的一个组件，用于在表格的表头中添加一个全选复选框。p-table是PrimeNG框架中的另一个组件，用于展示和管理表格数据。

当移动到下一页时，标题中的SelectAll复选框应取消选中，以确保用户在浏览不同页码的数据时，不会出现误操作。这样可以避免用户在选择全部数据时，跳转到下一页后仍然保持全选状态。

为了实现这个功能，可以通过监听p-table的分页事件，在分页事件触发时，将SelectAll复选框的选中状态设置为未选中。具体的实现代码如下：

import { Component } from '@angular/core';

@Component({
  selector: 'app-table',
  template: `
    <p-table [value]="data" [paginator]="true" (onPage)="onPageChange($event)">
      <ng-template pTemplate="header">
        <tr>
          <th>
            <p-tableHeaderCheckbox [(ngModel)]="selectAll"></p-tableHeaderCheckbox>
          </th>
          <th>Column 1</th>
          <th>Column 2</th>
          <th>Column 3</th>
        </tr>
      </ng-template>
      <ng-template pTemplate="body" let-rowData>
        <tr>
          <td>
            <p-tableCheckbox [(ngModel)]="rowData.selected"></p-tableCheckbox>
          </td>
          <td>{{ rowData.column1 }}</td>
          <td>{{ rowData.column2 }}</td>
          <td>{{ rowData.column3 }}</td>
        </tr>
      </ng-template>
    </p-table>
  `,
})
export class TableComponent {
  data: any[]; // 表格数据
  selectAll: boolean = false; // SelectAll复选框的选中状态

  onPageChange(event: any) {
    this.selectAll = false; // 移动到下一页时，将SelectAll复选框的选中状态设置为未选中
  }
}

在上述代码中，我们通过监听p-table的onPage事件，在事件触发时将selectAll变量设置为false，从而取消SelectAll复选框的选中状态。

这样，在使用p-table和p-tableHeaderCheckbox时，当移动到下一页时，标题中的SelectAll复选框会自动取消选中，确保用户在浏览不同页码的数据时不会出现误操作。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云云数据库MySQL。