question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[ionic2] virtualTrackBy seem to not be working

See original GitHub issue

I was looking for some optimisation in my app then i stumble uppon something weird. In my template i’ve done this:

<ion-content>
    <ion-list [virtualScroll]="storeStands.collection$ | async"
        [virtualTrackBy]="trackStand"
        [headerFn]="alphabetical" >
        <ion-item-divider *virtualHeader="let header">{{ header }}</ion-item-divider>
        <a ion-item text-wrap
            *virtualItem="let stand"
            [navPush]="[standPage, { stand: stand }]">
            <h2>{{ stand.organization }}</h2>
        </a>
    </ion-list>
</ion-content>

In my controller

trackStand(index, stand: Stand) {
    console.log(index, stand);
    return stand.id;
}

Putting a console log in trackStand function but it’s never called (as opposed with ngForTrackBy).

Explorating futher i put a console.log(val) inside the ionic-angular/components/virtual-scroll/virtual-scroll.js:305 to see if my parameter was listened, and i get undefined.

    set: function (val) {
        this._trackBy = val;
    }

Moving back to my template i set [virtualTrackBy]="'trackStand'" and i then get 'trackStand' inside virtual-scroll.js:306.

But was more curious an tracked where this._trackBy was used, in the same file virtual-scroll.js:260 inside a condition.

set: function (val) {
    this._records = val;
    if (util_1.isBlank(this._differ) && util_1.isPresent(val)) {
        this._differ = this._iterableDiffers.find(val).create(this._cd, this._trackBy);
    }
}

I put console.log(this._trackBy, this._differ) inside that condition and surprise, this._trackBy is undefined and this._differ has a method _trackByFn with attribute name: 'trackByIdentity'.

Putting the console.log just before the condition, the this._trackBy display two times, one with undefined and one with 'trackStand', this._differ doesn’t change at all.

A final test was to remove the condition if (util_1.isBlank(this._differ) && util_1.isPresent(val)) and there this._differ._trackByFn.name was empty when [virtualTrackBy]="trackStand" and only there it work as expected.

So my conclusion is, when this._differ is set, and even if val change, this._differ isn’t changed, and doesn’t take in account this._trackBy.

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:3
  • Comments:16 (3 by maintainers)

github_iconTop GitHub Comments

4reactions
faraazccommented, Dec 12, 2016

+1

3reactions
jbgomez21commented, Dec 22, 2016

Any update about this issue? I have the same problem with ionic 2.0.0 RC4, [virtualTrackBy]=“trackStand” does not execute, if (util_1.isBlank(this._differ) && util_1.isPresent(val)) condition it’s alway false.

Read more comments on GitHub >

github_iconTop Results From Across the Web

[ionic v4 beta.3] Can't apply virtualTrackBy on virtual-scroll ...
I cant apply the virtualTrackBy function on this virtual scroll, ... trackBy seems to be working but the docs still refers to virtualTrackBy...
Read more >
Ion-virtual-scroll inside custom component - Stack Overflow
1 Answer 1 ; ion-virtual-scroll [approxItemHeight]="approxItemHeight" [trackBy]="trackBy" [items]="items" > ; div *virtualItem="let item; let idx ...
Read more >
ion-virtual-scroll - Ionic Framework
Changing dataset should use trackBy ​. It is possible for the identities of elements in the iterator to change while the data does...
Read more >
The 9 Most Common Mistakes That Ionic Developers Make
When working on a team, to avoid bugs you want to share the same environment, platforms, and plugins. With Cordova CLI, it's harder...
Read more >
How to use Angular Virtual Scroll with Ionic - YouTube
The Ionic virtual scroll component was deprecated with Ionic 6, but we can easily transition to the Angular virtual scroll implementation to ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found