0

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

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

我正在使用 Angular 11 和 ngx 分页。

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

0 回答 0