单击复选框要选择当前页面记录，例如只有 10 条记录

如何解决单击复选框要选择当前页面记录，例如只有 10 条记录

当我从标题中选中复选框时，它会选择所有总记录（分页中的所有页面），但我只想选择当前页面数据。

例如：我在第 1 页有 10 条记录，那么它应该只从当前页面中选择 10 条记录，但它从网格中选择了所有记录。

我使用的是 Angular 11 和 ngx-pagination。

.ts 文件代码：

usersData: any[]
totalRecords: any
pages: number = 1
      
   constructor(private httpService : HttpService) { this.usersData = new Array<any>() }
    
    ngOnInit(): void {
        this.getuserListData();
    }
      
    checks: boolean = false
    bulks(e:any){
        if(e.target.checked==true){
          this.checks = true
        }else{
          this.checks = false
        }
    }
    
    getuserListData() {
        this.httpService.getUsersList().subscribe((data) => {
          console.log(data);
          this.usersData = data.results;
          this.totalRecords = data.results.length
        })
    }

.html 文件代码：

<table class="table table-striped">
    <thead>
        <tr>
           <th><input type="checkBox" (change)="bulks($event)"/></th>
           <th>Gender</th>
           <th>Name</th>
           <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let users of usersData | paginate: {
            id: 'listing_pagination',itemsPerPage: 10,currentPage: pages,totalItems: totalRecords}">
            <td><input type="checkBox" [checked]="checks"/></td>
            <td>{{users.gender}}</td>
            <td>{{users.name.first }} {{users.name.last}}</td>
            <td>{{users.email}}</td>
        </tr>
    </tbody>
</table>
<div>
    <pagination-controls id="listing_pagination" (pageChange)="pages = $event"></pagination-controls>
</div>