Cannot ViewChild ion-infinite-scroll, cannot call its method then

Ionic Framework ionic-v3
1

so i need to enable the ion-infinite-scroll from other function rather than its output emited (ionInfinite)=doInfinite($event)

my html for infinite scroll, notice that we pass $event instead of #infiniteScroll, its wierd, we usually pass the instance of #

<ion-infinite-scroll #infiniteScroll (ionInfinite)="doInfinite($event)">
      <ion-infinite-scroll-content>LLoading</ion-infinite-scroll-content>
    </ion-infinite-scroll>

this is the doInfitinet output emit callback

// ionInfinite output emited
// this will disable infinitescroll if pagination is completed
  public doInfinite(infinite:InfiniteScroll){
    if(this.visitationData.length >= (this.visitationData[0].maxpage)) {
      infinite.enable(false);

    }else{
      infinite.enable(true);

      this.getVisitation(this.visitationData.length+1).then(data=>{
        if(data){
          infinite.complete();

        }
      });
    }


  }

this is the other function, Notice the comment in the code, that line generate error


  @ViewChild('infiniteScroll') public infiniteScroll:InfiniteScroll;
  public filterChanged() {
    console.log(this.filter);
    this.visitationData = [];
    // this.infiniteScroll.enable(true)  <--  this calling method is from ViewChild, this line generate error
    this.getVisitation();
  }

the error generated says, which mean its not a Infinite scroll

TypeError: this.infiniteScroll.enable is not a function

please help me

2

Ok i have solution, but it doesnt answer my curiosity of why cannot do ViewChild infinite scroll

solution: Bind enabled to variable


    <ion-infinite-scroll [enabled]="this.isInfiniteEnable" (ionInfinite)="doInfinite($event)">
      <ion-infinite-scroll-content>LLoading</ion-infinite-scroll-content>
    </ion-infinite-scroll>
1 Like
3

I just got the same issue. I think because the view child doesn’t give you a infinity scroll element but an ElementRef to the DOM element. So you don’t have the methods of that ionic element.
Probably you can access this somehow via the child element. But I was lazy too and used the way you did it too :wink:

4

Hey I got the solution to that! use the read parameter in ViewChild like this:

@ViewChild('infiniteScroll', {read: InfiniteScroll}) public infiniteScroll:InfiniteScroll;

That way your telling ViewChild to fetch the InfiniteScroll component instead of the DOM element.

3 Likes
5

thanks man its worked for me