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.

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

See original GitHub issue

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:

Create any virtual scroll component.
Just give a virtualTrackBy on this component.
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>

Issue Analytics

State:
Created 5 years ago
Reactions:15
Comments:13 (1 by maintainers)

Top GitHub Comments

8reactions

evertonrobertoaulercommented, Mar 6, 2019

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.

4reactions

gartorwarecommented, Apr 17, 2019

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

Top Results From Across the Web

ion-virtual-scroll - Ionic Framework

ion -virtual-scroll. Virtual Scroll displays a virtual, "infinite" list. An array of records is passed to the virtual scroll containing the data to...

VirtualScroll - Ionic API Documentation

Attr Type Details bufferRatio number headerFn function virtualTrackBy function Same as ngForTrackBy which can be used on ngFor .

ionic 4 virtual scroll not working - Stack Overflow

But I get an error with Ionic virtual scroll: Can't bind to 'virtualScroll' since it isn't a known property of 'ion-list'. What wrong ......

Getting to Know the Angular CDK Virtual Scroll Feature

As a developer, you've probably had to implement a big list or table for your application using an infinite scroll technique. The problem...

vue-virtual-scroll-list - npm

A vue component support big amount data list with high scroll performance. ... Only 3 required props, simple and very easy to use....