Angular 8中分页器中的图像

import { Component, OnInit } from '@angular/core';
import { PageEvent } from '@angular/material/paginator';

@Component({
  selector: 'app-pagination',
  templateUrl: './pagination.component.html',
  styleUrls: ['./pagination.component.css']
})
export class PaginationComponent implements OnInit {
  data: any[] = [];
  pageSize = 10;
  currentPage = 0;

  constructor() {
    // 模拟数据
    for (let i = 0; i < 100; i++) {
      this.data.push({ id: i, name: `Item ${i}` });
    }
  }

  ngOnInit(): void {}

  onPageChange(event: PageEvent): void {
    this.pageSize = event.pageSize;
    this.currentPage = event.pageIndex;
    // 根据当前页码和每页大小获取数据
    const startIndex = this.currentPage * this.pageSize;
    const endIndex = startIndex + this.pageSize;
    const paginatedData = this.data.slice(startIndex, endIndex);
    console.log(paginatedData);
  }
}

<!-- pagination.component.html -->
<mat-paginator [length]="data.length" [pageSize]="pageSize" (page)="onPageChange($event)">
</mat-paginator>