角度分页器可加载整个数组

如何解决角度分页器可加载整个数组

我在显示一系列照片（json服务器）以及棱角分页器时遇到麻烦。 数组会忽略页面划分并显示所有照片。

import { ProductEditComponent } from './../product.edit/product.edit.component';
import { ListComponentsClass } from './../../../share/ListComponents';
import { SettingService } from 'src/app/share/services/settings.service';
import { Router } from '@angular/router';
import { MsgList } from 'src/app/share/services/msg.list';
import { UniversalDataService } from 'src/app/share/services/universal.data.service';
import { Component,OnInit } from '@angular/core';
import { DialogService } from 'src/app/share/services/dialog.service';
import { IProduct,compRoutes } from 'src/app/share/models/type';
import { PageEvent } from '@angular/material';

@Component({
    selector: 'app-product.list',templateUrl: './product.list.component.html',styleUrls: ['./product.list.component.scss']
})
export class ProductListComponent extends ListComponentsClass<IProduct> implements OnInit {
data = [];

pageNum = 0;
pageSize = 2;

constructor(
    public $SETTINGS: SettingService,public router: Router,public $MSG: MsgList,public listService: UniversalDataService,public dialogService: DialogService
) {
    super($SETTINGS,router,$MSG,listService,dialogService);
    this.editUrl = compRoutes.productBuy;
    this.dataUrl = compRoutes.product;
    this.listService.setServiceUrl(this.dataUrl);
}

ngOnInit() {
    this.itemsLoad(this.componentData.length,this.$SETTINGS.get("startListLen"));
    this.getData({ pageIndex: this.pageNum,pageSize: this.pageSize });
}

getData(pageNumbers) {
    let index = 0;
    let startingIndex = pageNumbers.pageIndex * pageNumbers.pageSize;
    let endingIndex = startingIndex + pageNumbers.pageSize;
    this.data = this.componentData.filter(() => {
        index++;
        return (index > startingIndex && index <= endingIndex) ? true : false;
    });
}
}

html

<div class="card-list">
<div>
    <div *ngFor="let product of componentData" >
        <app-card [product]="product"></app-card>
    </div>
</div>
<div class="img-paginator">
    <mat-paginator [length]="componentData.length" [pageSize]="pageSize" [pageIndex]="pageNum"
        [pageSizeOptions]="[1,2,4,8,10]" (page)="getData($event)">
    </mat-paginator>
</div>

如果我将* ngFor =“ let componentData 的乘积更改为* ngFor =” let product 数据”的分页将开始工作，但是页面加载数组将是空的。我该如何解决，可以避免两个数组？