Блог

Когда я установил флажок в заголовке, он выбирает все общие записи (все страницы в разбивке на страницы), но я просто хочу выбрать текущие данные страницы.

Например: у меня есть 10 записей на странице № 1, тогда он должен выбрать только 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>