Ionic-framework: [ionic v4 beta.3] Can't apply virtualTrackBy on virtual-scroll component

[favrio]

Bug Report

Ionic Info

Ionic:

   ionic (Ionic CLI)          : 4.1.0
   Ionic Framework            : @ionic/angular 4.0.0-beta.3
   @angular-devkit/core       : 0.7.2
   @angular-devkit/schematics : 0.7.2
   @angular/cli               : 6.1.2   @ionic/ng-toolkit          : 1.0.5
   @ionic/schematics-angular  : 1.0.4

Cordova:

   cordova (Cordova CLI) : 6.5.0   Cordova Platforms     : none   Cordova Plugins       : no whitelisted plugins (0 plugins total)

System:

   ios-deploy : 1.9.2
   ios-sim    : 6.1.3
   NodeJS     : v8.9.4 (/usr/local/bin/node)
   npm        : 5.6.0
   OS         : macOS High Sierra
   Xcode      : Xcode 9.4.1 Build version 9F2000

Environment:

   ANDROID_HOME : not set

Describe the Bug
I cant apply the virtualTrackBy function on this virtual scroll, it tells me Can't bind to 'virtualTrackBy' since it isn't a known property of 'ion-virtual-scroll'. on console. The IonicModule is imported in my module by default.

There is no any docs about virtualTrackBy in v4.

Steps to Reproduce
Steps to reproduce the behavior:

1. Create any virtual scroll component.
2. Just give a virtualTrackBy on this component.
3. It will return this error msg.

Related Code

<ion-virtual-scroll *ngIf="formattedRows.length" [items]="formattedRows" approxItemHeight="40px" [virtualTrackBy]="">
    <div class="data-row" *virtualItem="let item;">
      <div class="data-cell" *ngFor="let data of item | keyvalue" [innerHTML]="data.value"></div>
    </div>
  </ion-virtual-scroll>

[AVatch]

Agreed - after trying this out, same error was thrown.

In the common scenario where the data is paginated, or the items are interactable, this is very necessary otherwise each pagination causes a re-render breaking the otherwise great experience w/ this virtual scroll

[Lx]

There actually is one mention of virtualTrackBy in the v4 documentation for ion-virtual-scroll:

https://github.com/ionic-team/ionic/blob/master/core/src/components/virtual-scroll/readme.md#changing-dataset-should-use-virtualtrackby

But I'm not sure whether this documentation is intentional though (perhaps accidentally copied from elsewhere?), because virtualTrackBy is mentioned nowhere else on the page, especially in the list of properties.

[ibnclaudius]

I'm facing the same error described by @hr1992. My ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.4.0 (/Users/ibnclaudius/.config/yarn/global/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0-beta.16
   @angular-devkit/build-angular : 0.10.6
   @angular-devkit/schematics    : 7.0.6
   @angular/cli                  : 7.0.6
   @ionic/angular-toolkit        : 1.2.0

Cordova:

   cordova (Cordova CLI) : 8.1.2 ([email protected])
   Cordova Platforms     : android 7.1.3
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.2.5, (and 5 other plugins)

System:

   NodeJS : v11.2.0 (/Users/ibnclaudius/.nvm/versions/node/v11.2.0/bin/node)
   npm    : 6.4.1
   OS     : macOS

[evertonrobertoauler]

Hello guys

I'm using @angular/cdk/scrolling, instead of ion-virtual-scroll.

It works perfectly, no performance issues with data update.

page html

<ion-content>
  <cdk-virtual-scroll-viewport #scroll itemSize="130" minBufferPx="500" maxBufferPx="1000">
    <ion-list *ngIf="(items$ | async) as items">
      <ion-item *cdkVirtualFor="let item of items; trackBy: trackByFn">
        <ion-label>
          {{ item.description }} 
        </ion-label> 
      </ion-item>
    </ion-list>
  </cdk-virtual-scroll-viewport>
</ion-content>

page component

@ViewChild('scroll') scroll: CdkVirtualScrollViewport;

trackByFn(_, item: Item) {
  return item.id;
}

scrollToTop() {
  this.scroll.scrollTo({ top: 0 });
}

page scss

cdk-virtual-scroll-viewport {
  width: 100%;
  height: 100%;
}

cdk-virtual-scroll-viewport /deep/ .cdk-virtual-scroll-content-wrapper {
  max-width: 100%;
}

I hope this can help some of you guys, while virtualTrackBy is missing.

[eduboxgithub]

Is this fixed on rc0 or rc1?

I'm still getting the same error.

[Ross-Rawlins]

Is this resolved>

[rdlabo]

Maybe, virtualTrackBy is be trackBy.
https://github.com/ionic-team/ionic/blob/master/angular/src/directives/virtual-scroll/virtual-scroll.ts#L89

[Slavrix]

virtualTrackBy seems to still be missing.

trackBy does seem to work as intended in its place.

I keep getting what seem to be looping redraws also.

https://imgur.com/a/hweMwY5

I'm using angular to I might look into using @evertonrobertoauler solution above .

[evertonrobertoauler]

Hi guys, now using the stable release of @ionic/angular, trackBy it's finally working.

<ion-virtual-scroll [items]="myList" [trackBy]="trackByFn">

  trackByFn(index, item) {
    return item ? item.id : index;
  }

I hope now this issue can be closed.

[gartorware]

trackBy seems to be working but the docs still refers to virtualTrackBy.
https://ionicframework.com/docs/api/virtual-scroll#changing-dataset-should-use-virtualtrackby

[FloryanFilip]

Can someone explain to me why trackBy function is used in the first place? Is this some kind of a filter function?

[sjregan]

@FloryanFilip trackBy is an Angular feature for improving performance.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to inactivity. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Thank you for using Ionic!