Удалить функцию сращивания в разбивке по угловым материалам - PullRequest
Новая
       9

Удалить функцию сращивания в разбивке по угловым материалам

0 голосов
/ 16 ноября 2018

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

Ниже приведен код: - 

import {
  Component,
  OnInit,
  ViewChild
} from '@angular/core';
import {
  MatPaginator,
  MatTableDataSource
} from '@angular/material';

/**
 * @title Table with pagination
 */
@Component({
  selector: 'table-pagination-example',
  styleUrls: ['table-pagination-example.css'],
  templateUrl: 'table-pagination-example.html',
})
export class TablePaginationExample implements OnInit {
  displayedColumns: string[] = ['position', 'name'];
  public array: any;
  public pageSize = 5;
  public currentPage = 0;
  public totalSize = 0;
  dataSource = [{
      position: 1,
      name: 'Hydrogen'
    },
    {
      position: 2,
      name: 'Helium'
    },
    {
      position: 3,
      name: 'Lithium'
    },
    {
      position: 4,
      name: 'Beryllium'
    },
    {
      position: 5,
      name: 'Boron'
    },
    {
      position: 6,
      name: 'Carbon'
    },
    {
      position: 7,
      name: 'Nitrogen'
    },
    {
      position: 8,
      name: 'Oxygen'
    },
    {
      position: 9,
      name: 'Fluorine'
    },
    {
      position: 10,
      name: 'Neon'
    },
    {
      position: 11,
      name: 'Sodium'
    },
    {`enter code here`
      position: 12,
      name: 'Magnesium'
    },
    {
      position: 13,
      name: 'Aluminum',
    },
    {
      position: 14,
      name: 'Silicon'
    },
    {
      position: 15,
      name: 'Phosphorus'
    },
  ]

  @ViewChild(MatPaginator) paginator: MatPaginator;
  ngOnInit() {
    this.array = this.dataSource;
    this.totalSize = this.dataSource.length;
    this.iterator();
    console.log(this.totalSize, "total size")
  }
  // 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;
  }
  public handlePage(e: any) {
    this.currentPage = e.pageIndex;
    this.pageSize = e.pageSize;
    this.iterator();
  }
export interface PeriodicElement {
  name: string;
  position: number;
  weight: number;
  symbol: string;
}
<div class="mat-elevation-z8">
  <table mat-table [dataSource]="dataSource">
    <!-- Position Column -->
    <ng-container matColumnDef="position">
      <th mat-header-cell *matHeaderCellDef> No. </th>
      <td mat-cell *matCellDef="let element let i = index"> {{ i + 1 }} </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 -->
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
  <mat-paginator #paginator [pageSize]="pageSize" [pageSizeOptions]="[5, 10, 20]" [showFirstLastButtons]="true" [length]="totalSize" [pageIndex]="currentPage" (page)="pageEvent = handlePage($event)">
  </mat-paginator>
</div>
Если в массиве 10 значений, на первой странице нужно отобразить 5, поэтому значение индекса на первой странице будет от 1 до 5, а в Pagination функция iterator () имеет видобъединяя значение массива, отсюда снова берется значение индекса 1 для данных с 6 по 10 на следующей странице.

Есть ли способ избежать сращивания при разбиении на страницы.

1 Ответ

0 голосов
/ 16 ноября 2018

Почему вы хотите предотвратить сплайсинг? Если ваша проблема связана с неверным значением индекса на следующей странице, вы можете изменить значение столбца позиции, как показано ниже, для отображения правильного индекса на следующей странице: 

 <!-- Position Column -->
<ng-container matColumnDef="position">
  <th mat-header-cell *matHeaderCellDef> No. </th>
  <td mat-cell *matCellDef="let element let i = index"> {{ (pageSize*currentPage) + i + 1 }} </td>
</ng-container>
...