[virtualScroll] issue when change data or reset with new items


I use virtualscroll to show a big list, this list is splitted by groups, but when i change group and add new value in array, virtualscroll reset with blank list.
I don’t know how can resolve this.


  <ion-list [virtualScroll]="playlistFull" [hidden]="!groupView" approxItemHeight="'40px'" [virtualTrackBy]="trackBy">
    <button ion-item *virtualItem="let channel" (click)="channelSelected(channel.link)"> // don't change items
        <ion-img item-start [src]="channel.logo" width="30" height="30"></ion-img>


  updateList(group) {
    this.groupView = group;

trackBy(index, channel) {
  if(channel["group"] == this.groupView) { // Error this.groupView here is always undefined
    return channel;


Use a lambda:

<ion-list [virtualTrackBy]="tracker">
tracker: (ix: number, obj: any) => any;
constructor() {
  this.tracker = (ix, obj) => this.trackBy(ix, obj);
trackBy(ix: number, obj: any): any {
  // now "this" is reliable


i need change value, change group-list! trackBy don’t return nothing…


I don’t understand what you are saying.

Using a lambda will solve the “this.groupView here is always undefined” issue in your comment.


yes ok… but i need also change data list for virtualscroll, for show other list, different item’s.
my virtualscroll have always same items.


how i can reset playlistFull with new items, or show only some items by key value.