virtualScroll with virtualTrackBy

virtualTrackBy, has it worked for anyone?

I have:

<ion-list [virtualScroll]="clubs" [virtualTrackBy]="trackByFunction" [approxItemHeight]="180px" approxHeaderHeight="0px"
    approxFooterHeight="0px" no-lines>
    <div *virtualItem="let club; let idx = index;">
        <bp-club [club]="club" [idx]="idx" (onSelectedClub)="onSelectedClub($event)"></bp-club>
    </div>
</ion-list>

  trackByFunction(index, club) {
    return club.id;
   }

but, trackByFunction never is called

Instead, trackByIdentity is called as image shows, why?

Regards

1 Like

Same probleme…

Same here. Did anybody managed to make it work? Does anybody have working example?

Hi @SiteXw
Finally It works for me.

    <ion-list [virtualScroll]="clubs" [virtualTrackBy]="identify" [approxItemHeight]="maxPxByRatio" approxHeaderHeight="0px"
        approxFooterHeight="0px" no-lines>
        <div *virtualItem="let club; let idx = index;">
            <bp-club [club]="club" [idx]="idx" (onSelectedClub)="onSelectedClub($event)"></bp-club>
        </div>
    </ion-list>
  identify(index, club) {
        return club.id;
  }

It’s important that “clubs” list is initialized to undefined or null.
Dont initialized to “[]” list

example:

@Component({
  ...
})
export class MyComponent implements OnInit {
    clubs: Club[] = undefined;  <-- it's OK

    constructor() {}

    ngOnInit() {
      this.club = .....
    }
}

@Component({
  ...
})
export class MyComponent implements OnInit {
    clubs: Club[] = [];  <-- it's bad

    constructor() {}

    ngOnInit() {
      this.club = .....
    }
}

Tell me if it works for you…

Regards

I’m not sure I understand. Why do you have to initialize your list to undefined? You have to initialize it to an array before the first time you use it, right? Other wise you can’t access it. And if I do this, virtualTrackBy is still not being called.

@jbgomez21, can you give an example how do you work with your clubs list. I mean how its getting real values.