when click page number on paging angular 7 it accumulate ?

I make paging on angular 7 app

firstly app load with paging without any proplem meaning if i give 10 rows per page

when load component it display correct

problem strat when click page 2

it become 20 rows displayed on screen

if i click 3 it become 60 rows displayed on screen

i need when click page 2 display second ten rows

but not accumlate records on screen

so how to solve this issue please ?

so i get code forom this link

https://www.c-sharpcorner.com/article/server-side-pagination-using-asp-net-core-and-angular-8-part-two/

for more clear

pag1 display 20 rows

page2 display next 20 rows

this not happen it display for second page 40 rows why

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { Router } from '@angular/router';
import { ActivatedRoute } from '@angular/router'
import { DisplayreportService } from '../displayreport.service';
import { reportfilter } from '../reportfilter.model';
import * as XLSX from 'xlsx'
import * as FileSaver from 'file-saver';
import { PaginationService } from '../pagination.service';
import { JsonPipe } from '@angular/common';
import { reportsperpages } from '../reportsperpages';
//const EXCEL_TYPE = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';
const EXCEL_TYPE = 'application/vnd.ms-excel;charset=utf-8';
const EXCEL_EXTENSION = '.xlsx';
@Component({
selector: 'app-reportdetails',
templateUrl: './reportdetails.component.html',
styleUrls: ['./reportdetails.component.css']
})
export class ReportdetailsComponent implements OnInit {
@ViewChild('TABLE', { static: false }) TABLE: ElementRef;
title = 'Excel';
reportid: string;
datareturned: any;
searchData: any = {};
reportdetailslist: any[];
headerCols: string[] = [];
contentBody: any[] = [];
reportList: any[] = [];
FilterList: any[] = [];
FilterBinddata: any[] = [];
ReportData:any={};
//for paging
pageNumber: boolean[] = [];
pageField = [];
exactPageList: any;
paginationData: number;
ReportPerPage: any = reportsperpages.large;
totalReports: any;
totalReportCount: any;
ParamReportid : string;
//companies = [];
pageNo: any = 1;
currentPage = 1;
AllReports=[];
//===enum
smallPageRow: boolean = true;
mediumPageRow: boolean = false;
largePageRow: boolean = false;
small = reportsperpages.small;
medium = reportsperpages.medium;
large = reportsperpages.large;
//=====
constructor(private router: ActivatedRoute, private _displayreport: DisplayreportService,public paginationService: PaginationService) {
}
ngOnInit() {
const paramIndex = window.location.href.indexOf('id=');
if (paramIndex > 0) {
let param = window.location.href.substring(paramIndex);
let param1 = param.split('&')[0];
let param2 = param.substr(param.indexOf('=') + 1);
this.ParamReportid=param2;
console.log(param2);
//------------------
this.pageNumber[0] = true;
this.paginationService.temppage = 0;
//=================
//------for menu
this._displayreport.GetReportFilteresById(param2).subscribe((data: any[]) => {
this.FilterList = data;
console.log("Filter reports" + this.FilterList);
});
console.log ("value of report id" + param2)
this._displayreport.GetReportFilterBind(param2).subscribe((data2: any[]) => {
this.FilterBinddata = data2;
console.log("Filter reports2" + this.FilterBinddata[1].reportSource);
});
//-------------get data for report
this._displayreport.GetsubReportsById(param2).subscribe((data3: any) => {
this.ReportData = data3;
console.log("databyid" + JSON.stringify(this.ReportData) );
});
this.searchData.PageNumber=this.pageNo;
this.searchData.RowCountPerPage=this.ReportPerPage;
this.searchData.ReportID=param2;
// console.log("data " + this.searchData);
// this._displayreport.GetReportDetailsByReportId(param2).subscribe((data: any[]) => {
this._displayreport.GetReportDetailsPaging(this.searchData).subscribe((data: any[]) => {
this.reportdetailslist = data;
console.log("details is" + data )
this.totalReportCount=this.getAllReportsCount();
console.log("total count is " + this.totalReportCount)
//this.reportdetailslist.forEach(function(e) { e.download=1 });
//console.log("data after add download " + JSON.stringify(this.reportdetailslist) );
//console.log("original after add download " + JSON.stringify(data) );
//====modify object based on third type report
//if(this.ReportData.inRunTime=0 && this.ReportData.downLoadProcedureName !==null && this.ReportData.parameterName !==null)
//{
//if(this.ReportData.inRunTime=0 && this.ReportData.downLoadProcedureName ==null && this.ReportData.parameterName ==null)
//{
//for(let idx = 0; idx < data.length; idx++) {
//data[idx].download = 1;
// }
//==================
var assignwhennull={};
Object.assign(assignwhennull,data)
//---
this.headerCols = Object.keys(data[0]);
console.log("header col" + this.headerCols);
data.forEach((item) =>{
let values = Object.keys(item).map((key)=> item[key]);
this.contentBody.push(values);
console.log("contenet " + JSON.stringify( this.contentBody));
});
//}
console.log("data " + this.reportdetailslist)
});
//this._displayreport.GetReportDetails(param2)
// .subscribe(data =>this.datareturned=data)
//console.log(this.datareturned);
}
// console.log(this.router.snapshot.params['id']);
//this.reportid=this.router.snapshot.params['id'];
//console.log("value is " + this.reportid)
console.log("thank you ahmed");
}
showReportsByPageNumber(page, i) {
this.AllReports=[] ;
this.pageNumber = [];
this.pageNumber[i] = true;
console.log("value of page " + this.pageNumber[i])
console.log("value of i " + i)
this.searchData.PageNumber = page;
this.getalldatareports();
}
totalNoOfPages() {
this.paginationData = Number(this.totalReportCount / this.ReportPerPage);
let tempPageData = this.paginationData.toFixed();
if (Number(tempPageData) < this.paginationData) {
this.exactPageList = Number(tempPageData) + 1;
this.paginationService.exactPageList = this.exactPageList;
} else {
this.exactPageList = Number(tempPageData);
this.paginationService.exactPageList = this.exactPageList
}
this.paginationService.pageOnLoad();
this.pageField = this.paginationService.pageField;
}
getAllReportsCount() {
// this._displayreport.getAllReportsCount(this.ParamReportid).subscribe((res: any) => {
// this.totalReportCount = res;
this._displayreport.GetReportDetailsPaging(this.searchData).subscribe((data2: any[]) => {
this.totalReportCount = data2[0].totalCount;
console.log("count rows is " + this.totalReportCount);
this.totalNoOfPages();
})
//this._displayreport.getAllReportsCount(this.ParamReportid).subscribe((res: any) => {
// this.totalReportCount = res;
//this.totalNoOfPages();
// })
}
showPrevReports() {
if (this.paginationService.showNoOfCurrentPage != 1) {
this.paginationService.prevReports();
this.pageNumber = [];
this.pageNumber[0] = true;
this.currentPage = this.paginationService.pageField[0];
this.getalldatareports();
}
}
showNextReports() {
if (this.paginationService.disabledNextBtn == false) {
this.pageNumber = [];
this.paginationService.nextReports();
this.pageNumber[0] = true;
this.currentPage = this.paginationService.pageField[0];
this.getalldatareports();
}
}
setRecPerPage(noOfRec) {
this.AllReports = [];
this.pageNumber = [];
this.pageNumber[0] = true;
this.paginationService.temppage = 0;
if (noOfRec == reportsperpages.small) {
this.smallPageRow = true;
this.mediumPageRow = false;
this.largePageRow = false;
this.ReportPerPage = noOfRec;
this.currentPage = 1;
this.pageNumber[0] = true;
this.getalldatareports();
}
else if (noOfRec == reportsperpages.medium) {
this.smallPageRow = false;
this.mediumPageRow = true;
this.largePageRow = false;
this.ReportPerPage = noOfRec;
this.currentPage = 1;
this.pageNumber[0] = true;
this.getalldatareports();
} else {
this.smallPageRow = false;
this.mediumPageRow = false;
this.largePageRow = true;
this.ReportPerPage = noOfRec;
this.currentPage = 1;
this.pageNumber[0] = true;
this.getalldatareports();
}
//this.pageSize = page;
}
getalldatareports()
{
console.log("welcome" + JSON.stringify(this.searchData));
this._displayreport.GetReportDetailsPaging(this.searchData).subscribe((data2: any[]) => {
this.reportdetailslist=[];
this.reportdetailslist=null;
this.AllReports = data2;
console.log("details is" + data2 )
this.getAllReportsCount();
var assignwhennull={};
Object.assign(assignwhennull,data2)
this.headerCols = Object.keys(data2[0]);
console.log("header col" + this.headerCols);
data2.forEach((item) =>{
let values = Object.keys(item).map((key)=> item[key]);
this.contentBody.push(values);
console.log("contenet " + JSON.stringify( this.contentBody));
});
});
}
}