Closed favrio closed 4 years ago
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
There actually is one mention of virtualTrackBy
in the v4 documentation for ion-virtual-scroll
:
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.
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 (cordova-lib@8.1.1)
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
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.
Is this fixed on rc0 or rc1?
I'm still getting the same error.
Is this resolved>
Maybe, virtualTrackBy is be trackBy. https://github.com/ionic-team/ionic/blob/master/angular/src/directives/virtual-scroll/virtual-scroll.ts#L89
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.
I'm using angular to I might look into using @evertonrobertoauler solution above .
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.
trackBy
seems to be working but the docs still refers to virtualTrackBy
.
https://ionicframework.com/docs/api/virtual-scroll#changing-dataset-should-use-virtualtrackby
Can someone explain to me why trackBy function is used in the first place? Is this some kind of a filter function?
@FloryanFilip trackBy is an Angular feature for improving performance.
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!
Bug Report
Ionic Info
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:
Related Code