刷新后如何将垫表分页器保留在所选页面？

Question

我使用 mat 表来显示数据，我的 API 提供逐页数据。 现在第一次渲染，然后用户更改页面并刷新页面，然后我想显示第二页而不是第一页。 为此，我已将 pageIndex 保存到本地存储并在页面刷新时检索，并且我的 API 还调用第 2 页，但分页选项错误，如下所示： 刷新后的 Mat 页面选项

其中显示的是1-8；相反，它应该显示 9-15，而且导航也是错误的，因为它是最后一页

这是我的 HTML

<mat-paginator
      class="mat-paginator-sticky"
      [hidden]="pageLength <= pageSizeOptions[0]"
      [pageSizeOptions]="pageSizeOptions"
      [showFirstLastButtons]="true"
      [length]="pageLength"
      [pageIndex]="page.pageIndex"
      (page)="pageChange($event)"
      aria-label="Select page of users"
    ></mat-paginator>

这是 ts 文件代码片段

constructor() {
     // Retrieve and set the current page index
     const savedPageIndex = localStorage.getItem('currentPageIndex');
     if (savedPageIndex) {
       this.page.pageIndex = +savedPageIndex;
       
     }
  }

我尝试更改为

ngAfterViewInit(): void {
    setTimeout(() => {
      if (this.dataSource) {
        this.dataSource.sort = this.sort;
          this.paginator.pageIndex = this.page.pageIndex;
          this.paginator.pageSize = this.page.pageSize;
          this.paginator.length = this.pageLength;
          this.paginator._changePageSize(this.paginator.pageSize);
          this.dataSource.paginator = this.paginator;
         
      }
    });
  }

我期待一种方法来更改或纠正页面范围标签和下一个上一个按钮

Answer 1

我认为我们这里遇到的是分页器未与当前页面索引和页面大小正确同步的情况。

您需要稍微修改一下代码：

例如：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit, AfterViewInit {
  @ViewChild(MatPaginator) paginator!: MatPaginator;
  dataSource = new MatTableDataSource<any>([]);
  pageLength = 300;  // Replace with your total length of data
  pageSizeOptions = [8, 16, 24];  // you can dynamically decide what page options to use up to you
  page = {
    pageIndex: 0,
    pageSize: 8
  };

  constructor() {
    // Retrieve and set the current page index and page size
    const savedPageIndex = localStorage.getItem('currentPageIndex');
    const savedPageSize = localStorage.getItem('currentPageSize');
    if (savedPageIndex) {
      this.page.pageIndex = +savedPageIndex;
    }
    if (savedPageSize) {
      this.page.pageSize = +savedPageSize;
    }
  }

  ngOnInit(): void {
    // Fetch initial data
    this.fetchData(this.page.pageIndex, this.page.pageSize);
  }

  ngAfterViewInit(): void {
    this.paginator.pageIndex = this.page.pageIndex;
    this.paginator.pageSize = this.page.pageSize;
    this.paginator.length = this.pageLength;
    this.dataSource.paginator = this.paginator;

    this.paginator.page.subscribe(event => {
      this.pageChange(event);
    });
  }

  fetchData(pageIndex: number, pageSize: number): void {
    // Call your API here to fetch data based on pageIndex and pageSize
    // Example:
    this.apiService.getData(pageIndex, pageSize).subscribe(data => {
      this.dataSource.data = data.items;
      this.pageLength = data.totalItems;

      // Update paginator length
      this.paginator.length = this.pageLength;
    });
  }

  pageChange(event: any): void {
    this.page.pageIndex = event.pageIndex;
    this.page.pageSize = event.pageSize;

    // Save the current page index and size to localStorage
    localStorage.setItem('currentPageIndex', this.page.pageIndex.toString());
    localStorage.setItem('currentPageSize', this.page.pageSize.toString());

    // Fetch new data based on the current page index and size
    this.fetchData(this.page.pageIndex, this.page.pageSize);
  }
}