Question

我正在(page)上使用<mat-paginator>事件：

<mat-paginator #paginator 
      [pageSizeOptions]="[5, 10, 25, 100, 1000]" 
      [pageSize]="pageSize" [showFirstLastButtons]="true"
      [length]="total" (page)="getData($event)" 
      *ngIf="total>0">
</mat-paginator>

要更改<mat-table>中显示的数据。

当用户使用前后箭头更改页码时，会触发(page)事件：

getData(e)
{
  //this.oldPageSize = e.pageSize
  //console.log(e.pageIndex+' '+e.pageSize )
  this.getKits('defined', e.pageIndex, e.pageSize);
}

getKits()将转到服务器并执行以下脚本：

$sql = 'SELECT (SELECT count(*) FROM kit) as total, kit_id as id, kit_name as name,
    type_of_kit as ktype, received_quantity as quantity, kit_status as kstatus, date_added as da
    FROM kit
    ORDER BY system_date DESC 
    LIMIT :p, :s
    ';

$exec = $conn->prepare($sql);
$exec->bindValue(':p', $page, PDO::PARAM_INT);
$exec->bindValue(':s', $size, PDO::PARAM_INT);
$exec->execute();
$res = $exec->fetchAll();

在组件加载时，pageIndex和pageSize分别是0和5。而getData(e)被触发时，它们将被更改。

问题在于，当加载第一个初始数据（5行）时，当我转到分页器的下一页时，它将为getKits('defined', 1, 6)，底部仅显示一个新行，并且从其中删除了一个旧行。

我需要显示下5行。也许接下来的10行。（这里的数字大约等于所选的大小）。

分页器上的Angular 7和材料页面事件仅在更改页面索引时显示一个新行

0 个答案: