Проверить все записи с текущей страницы Angular

Question

Если я установлю флажок Select all, будут выбраны все записи.Но если у меня есть список пользователей, содержащий 50 пользователей, и я делю их на 5 страниц на странице, если я нажимаю флажок, все они будут выбраны, а не только записи на выбранной странице.Как я могу решить это?Это фрагмент моего кода.

.html

<table class="spacing-table table-responsive">
  <thead>
    <tr>
      <th>
        <label class="customcheck">
          <input type="checkbox" (change)="selectAll()">
          <span class="checkmark">Select all</span>
        </label>
      </th>
      <th id="table-header">Name</th>
      <th id="table-header">Group</th>
    </tr>
  </thead>
  <tbody>
      <tr *ngFor="let user of usersList | paginate: { itemsPerPage: 5, currentPage: p }">
        <td>
          <label class="customcheck">
            <input type="checkbox">
            <span class="checkmark">Select all</span>
          </label>
        </td>
        <td>{{user.name}}</td>
        <td>{{user.group}}</td>
      </tr>
  </tbody>
</table>
<pagination-controls (pageChange)="p=$event" previousLabel="Previous" nextLabel="Next"></pagination-controls>

.ts

isSelected: boolean = false
selectAll() {
    this.isSelected = !this.isSelected
}

Спасибо за ваше время!

Answer 1

Я не знаю точно, как работает ваше расширение для нумерации страниц, но что вы на самом деле можете сделать, это либо extend each userObject with an isSelected option или hold an external array for the selections.

Я назначаю вторую версию:

<table class="spacing-table table-responsive">
  <thead>
    <tr>
      <th>
        <label class="customcheck">
          <input type="checkbox" (change)="selectAll(p)">
          <span class="checkmark">Select all</span>
        </label>
      </th>
      <th id="table-header">Name</th>
      <th id="table-header">Group</th>
    </tr>
  </thead>
  <tbody>
      <tr *ngFor="let user of usersList; let i=index | paginate: { itemsPerPage: 5, currentPage: p }">
        <td>
          <label class="customcheck">
            <input type="checkbox" [checked]="isSelected[i]">
            <span class="checkmark">Select all</span>
          </label>
        </td>
        <td>{{user.name}}</td>
        <td>{{user.group}}</td>
      </tr>
  </tbody>
</table>
<pagination-controls (pageChange)="p=$event" previousLabel="Previous" nextLabel="Next"></pagination-controls>

Теперь вам нужно вручную запустить выбор в вашем контроллере следующим образом:

isSelected: boolean[];

ngOnInit() {
    this.isSelected = [];
    for(let i=0; i<this.userList.length; i++) {
        this.isSelected.push(false);
    }
}

selectAll(page: number) {
    // deselect all because of page changes
    for(let i=0; i<this.usersList.length; i++) {
        this.isSelected[i] = false;
    }

    // select all on current page
    for(let i=5*(p-1); i<5*(p-1)+5; i++) {
        if(i <= this.usersList.length-1) {
            this.isSelected[i] = true;
        }
    }
}

Возможно, этот ответ даст вам несколько советов для собственного ответа.

Answer 2

Однажды у меня была похожая проблема, и путь к ее достижению состоит в создании массива разбитых на страницы данных вместо использования канала для разбивки на страницы, а затем в логике контроллера для поиска текущей страницы и обновления выбора для этой страницы.

Используйте эту службу для создания страниц с разбивкой по страницам

export class TablePageService {
constructor() {
}

getPager(totalItems: number, currentPage: number = 1, pageSize: number) {
    // calculate total pages
    const totalPages = Math.ceil(totalItems / pageSize);

    const startPage = 1;
    const endPage = totalPages;

    // calculate start and end item indexes
    const startIndex = (currentPage - 1) * pageSize;
    const endIndex = Math.min(startIndex + pageSize - 1, totalItems - 1);
    // create an array of pages to ng-repeat in the pager control
    const pages = this.range(startPage, endPage);
   // return object with all pager properties required by the view
    return {
        totalItems,
        currentPage,
        pageSize,
        totalPages,
        startPage,
        endPage,
        startIndex,
        endIndex,
        pages,
    };
}

range(lowEnd, highEnd) {
    const arr = [];
    let c = highEnd - lowEnd + 1;
    while ( c-- ) {
        arr[c] = highEnd--;
    }
    return arr;
   }
}

, и в вашем контроллере вы можете определить метод setPage, где pagedItems выдаст вам текущий набор отображаемых страниц

public setPage(page: number) {

this.pager = this.tablePageService.getPager(
  this.tableContentList.length,
  page,
  this.tableConfig.pageSize
);

if (page < 1 || (page > this.pager.totalPages && page !== 1)) {
  return;
}
this.pagedItems = this.tableContentList.slice(this.pager.startIndex, this.pager.endIndex + 1);
if (this.pagedItems.length < this.pager.pageSize) {
  this.substituteItems = Array.from({
    length: this.tableConfig.pageSize - this.pagedItems.length,
  });
}
}