mat-checkbox Выбор: как применить выбор только к текущей странице в угловой таблице материалов?

Question

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

Я хочу выбрать только те строки, которые находятся натекущая выбранная страница.

Ниже приведена ссылка для на стеке

https://stackblitz.com/edit/angular-ssv6fc-k34hn6?file=app/table-selection-example.ts

tableData.component.ts

import {
  SelectionModel
} from '@angular/cdk/collections';
import {
  Component,
  OnInit,
  ViewChild
} from '@angular/core';
import {
  MatTableDataSource,
  MatPaginator
} from '@angular/material';
import {
  MatDialog,
  MatDialogRef,
  MAT_DIALOG_DATA
} from '@angular/material';
export interface PeriodicElement {
  name: string;
  position: number;
  weight: number;
  symbol: string;
}

export interface PeriodicElement {
  position: number;
  name: string;
  weight: number;
  symbol: string;

}


@Component({
  selector: 'table-selection-example',
  styleUrls: ['table-selection-example.css'],
  templateUrl: 'table-selection-example.html',
})
export class TableSelectionExample {
  dataSource: any = [{
      position: 1,
      name: 'Hydrogen',
      weight: 1.0079,
      symbol: 'H'
    },
    {
      position: 2,
      name: 'Helium',
      weight: 4.0026,
      symbol: 'He'
    },
    {
      position: 3,
      name: 'Lithium',
      weight: 6.941,
      symbol: 'Li'
    },
    {
      position: 4,
      name: 'Beryllium',
      weight: 9.0122,
      symbol: 'Be'
    },
    {
      position: 5,
      name: 'Boron',
      weight: 10.811,
      symbol: 'B'
    },
    {
      position: 6,
      name: 'Carbon',
      weight: 12.0107,
      symbol: 'C'
    },
    {
      position: 7,
      name: 'Nitrogen',
      weight: 14.0067,
      symbol: 'N'
    },
    {
      position: 8,
      name: 'Oxygen',
      weight: 15.9994,
      symbol: 'O'
    },
    {
      position: 9,
      name: 'Fluorine',
      weight: 18.9984,
      symbol: 'F'
    },
    {
      position: 10,
      name: 'Neon',
      weight: 20.1797,
      symbol: 'Ne'
    },
    {
      position: 11,
      name: 'Carbon',
      weight: 12.0107,
      symbol: 'C'
    },
    {
      position: 12,
      name: 'Nitrogen',
      weight: 14.0067,
      symbol: 'N'
    },
    {
      position: 13,
      name: 'Oxygen',
      weight: 15.9994,
      symbol: 'O'
    },
    {
      position: 14,
      name: 'Fluorine',
      weight: 18.9984,
      symbol: 'F'
    },
    {
      position: 15,
      name: 'Neon',
      weight: 20.1797,
      symbol: 'Ne'
    },


  ];
  displayedColumns: string[] = ['select', 'position', 'name', 'weight', 'symbol'];
  selection = new SelectionModel < PeriodicElement > (true, []);
  @ViewChild(MatPaginator) paginator: MatPaginator;
  showPagination: boolean = false;
  public array: any;
  public pageSize = 5;
  public currentPage = 0;
  positionValue = [];
  public totalSize = 0;
  ngOnInit() {
    this.dataSource.paginator = this.paginator;
    this.array = this.dataSource;
    this.totalSize = this.array.length;
    this.iterator();
    console.log(this.dataSource, "dataSoucr")
  }
  getData() {

  }
  //function for pagination
  private iterator() {
    const end = (this.currentPage + 1) * this.pageSize;
    const start = this.currentPage * this.pageSize;
    const part = this.array.slice(start, end);
    this.dataSource = part;
    console.log(this.dataSource, "dataSoucr")
    if (this.array.length == 0) {
      this.currentPage = this.currentPage - 1;
      const end = (this.currentPage + 1) * this.pageSize;
      const start = this.currentPage * this.pageSize;
      const part = this.array.slice(start, end);
      this.dataSource = part;
    }
  }
  public handlePage(e: any) {
    this.currentPage = e.pageIndex;
    this.pageSize = (e.pageSize != undefined) ? e.pageSize : this.pageSize;
    this.iterator();
  }
  /** Whether the number of selected elements matches the total number of rows. */
  isAllSelected() {
    const numSelected = this.selection.selected.length;
    const numRows = this.dataSource.length;
    this.dataSource.forEach(item => {
      this.positionValue.push(item.position); // here i need only selected position number not all rows
    })
    console.log(this.positionValue, "value")
    return numSelected === numRows;
  }

  /** Selects all rows if they are not all selected; otherwise clear selection. */
  masterToggle() {
    this.isAllSelected() ?
      this.selection.clear() :
      this.dataSource.forEach(row => this.selection.select(row));
  }
}

tableData.html

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

  <!-- Checkbox Column -->
  <ng-container matColumnDef="select">
    <th mat-header-cell *matHeaderCellDef>
      <mat-checkbox (change)="$event ? masterToggle() : null" [checked]="selection.hasValue() && isAllSelected()" [indeterminate]="selection.hasValue() && !isAllSelected()">
      </mat-checkbox>
    </th>
    <td mat-cell *matCellDef="let row">
      <mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
      </mat-checkbox>
    </td>
  </ng-container>

  <!-- Position Column -->
  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef> No. </th>
    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
  </ng-container>

  <!-- Name Column -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> Name </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>

  <!-- Weight Column -->
  <ng-container matColumnDef="weight">
    <th mat-header-cell *matHeaderCellDef> Weight </th>
    <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
  </ng-container>

  <!-- Symbol Column -->
  <ng-container matColumnDef="symbol">
    <th mat-header-cell *matHeaderCellDef> Symbol </th>
    <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selection.toggle(row)">
  </tr>
</table>

<mat-paginator #paginator class="mat-paginator-sticky" [pageSize]="pageSize" [pageSizeOptions]="[5, 10, 20]" [showFirstLastButtons]="true" [length]="totalSize" [pageIndex]="currentPage" (page)="pageEvent = handlePage($event)">
</mat-paginator>

В tableData.component.ts есть функциональность для разбивки на страницы, а также для выделения

Я также пытался связать с индексом в заголовке данныхТаблица, но не нашел способов сделать это.

Пожалуйста, помогите с этой проблемой.