angular - 移除 Angular Material Pagination 中的拼接功能

Question

有一个带有分页的角度材料数据表，用于显示数据，数据是数组的形式，问题是当单击下一个句柄页面时，索引值再次从 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，并且在分页中，iterator() 函数正在拼接数组值，因此它再次从索引值中获取1 为下一页的第 6 至第 10 数据。

有什么办法可以避免分页中的拼接。

标签： angularangular-material2

Answer 1

为什么要防止拼接？如果下一页上显示的索引值不正确是您的问题，那么您可以如下更改您的位置列值以在下一页上显示正确的索引：

 <!-- 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>