Related to ion-infinite-scroll in Ionic2

I am facing an issue with ion-infinite-scroll in my Ionic2 application. Please find the below code.

Code

<ion-infinite-scroll (ionInfinite)="doInfinite()" distance="5%">
            <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data...">
            </ion-infinite-scroll-content>
</ion-infinite-scroll>

doInfinite() method

doInfinite(){
    if(this.myReportList.length < this.reportCount){
        console.log("Inside doInfinite if");
        this.loadMore=true;
        this.startFrom = this.endTo+1; // for the time time the value of startFrom is 0 and endTo is 10.
        this.endTo = this.endTo+10;
        this.viewMyReports();
    }else{
        console.log("Inside doInfinite else");
        this.loadMore=false;
        this.genericService.showToast("Reached Bottom")
    }
}

In my case the doInfinite() method is invoked only for the first 2 times . Even though if(this.myReportList.length < this.reportCount){ is true . Could anyone please tell me why the method is not invoking ?

Scenario

Say I am having a total count of 50 and for the first time i am listing first 10 records , then when I reach the end of reports it again call the doInfinite() method with startFrom and endTo 11 and 20 respectively . But for the third time onwards the ion-infinite-scroll is not invoking the method . Please help me with this .

Edit

this.viewMyReports(); is the API call from where I am getting the reports

HTML Page

<ion-card *ngFor="let XX of responseList">
            <ion-item>
                <ion-row>
                    <ion-col col-7>
                        <p {{XX.***}}</p>
                        <p {{XX.***}}</p>
                    </ion-col>
                    <ion-col col-5>
                        <p> Submitted</p>
                        <p >{{XX.***}}</p>
                    </ion-col>
                </ion-row>
            </ion-item>
            <ion-card>

Thanks and Regards

Anand Raj