How to solve error length with null when click page number ?

Question

I work on angular 7 app I face problem

 

when press to paging it as press page number 2 it give me error i dont know why this error

 

done my error as below :

 

main-es2015.85811b324d3ec20b9963.js:1 ERROR TypeError: Cannot read property 'length' of null

at Object.updateDirectives (main-es2015.85811b324d3ec20b9963.js:1)

at Object.updateDirectives (main-es2015.85811b324d3ec20b9963.js:1)

at Ly (main-es2015.85811b324d3ec20b9963.js:1)

at Gy (main-es2015.85811b324d3ec20b9963.js:1)

at Wy (main-es2015.85811b324d3ec20b9963.js:1)

at Ly (main-es2015.85811b324d3ec20b9963.js:1)

at Gy (main-es2015.85811b324d3ec20b9963.js:1)

at qy (main-es2015.85811b324d3ec20b9963.js:1)

at Ly (main-es2015.85811b324d3ec20b9963.js:1)

at Gy (main-es2015.85811b324d3ec20b9963.js:1)

Er @ main-es2015.85811b324d3ec20b9963.js:1

main-es2015.85811b324d3ec20b9963.js:1 count rows is 855

 

this function is fired when press page number as below

showReportsByPageNumber(page, i) {
this.reportdetailslist=[] ;
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();
}
<ul class="pagination justify-content-center">
<li *ngFor="let page of pageField;let i=index" class="page-item">
<a (click)="showReportsByPageNumber(page,i)" [ngClass]="pageNumber[i] ? 'pageColor':'page-link'"
style=" margin-right: 5px;;margin-top: 5px">{{page}}</a>
</li>
</ul>

why this error display