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


#1

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.

home.html

  <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>
        <h2>{{channel.title}}</h2>
    </button>
  </ion-list>

home.ts

  updateList(group) {
    this.groupView = group;
  }

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

#2

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
}

#3

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


#4

I don’t understand what you are saying.

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


#5

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


#6

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