<ion-list [virtualScroll]= does not work after upgrade to ionic 3

ionic-v1
1

---- Error

Uncaught TypeError: Cannot read property ‘length’ of undefined
at processRecords (virtual-util.js:24)
at VirtualScroll.writeUpdate (virtual-scroll.js:440)
at virtual-scroll.js:322
at SafeSubscriber.schedulerFn [as _next] (core.es5.js:3860)
at SafeSubscriber.__tryOrUnsub (Subscriber.js:234)
at SafeSubscriber.next (Subscriber.js:183)
at Subscriber._next (Subscriber.js:125)
at Subscriber.next (Subscriber.js:89)
at EventEmitter.Subject.next (Subject.js:55)
at EventEmitter.emit (core.es5.js:3834)
at Array. (page-transition.js:34)
at MDTransition.Animation._fireBeforeWriteFunc (animation.js:838)
at MDTransition.Animation._beforeAnimation (animation.js:749)
at MDTransition.Animation._playDomInspect (animation.js:411)

----- Html code
<ion-list [virtualScroll]="entities" approxItemHeight="40px"> <ion-item *virtualItem="let entity"> <ion-grid> <ion-row baseline> <ion-col width-25> <h2>{{entity.created_time | amDateFormat:'DD.MM.YY'}}</h2> <p> {{entity.receiver_country}} </p> </ion-col> <ion-col width-75> <h2>{{entity.receiver_firstname}} {{entity.receiver_lastname}}</h2> <p> {{entity.sender_amount.value | currency: entity.sender_amount.currency :true:'1.2-2'}} </p> </ion-col> </ion-row> </ion-grid> </ion-item> </ion-list>

Any idea What I should do to fix this problem?

1 Like
2

Got the same

3

I have the same issue after upgrading from ionic 2 to 3.

  <ion-list [virtualScroll]="customers">
    <button ion-item *virtualItem="let customer" (click)="selectedCustomer(customer.customerId)">
      {{customer.name}}
      <p>{{customer.customerNumber}}</p>
    </button>
  </ion-list>

This yields

TypeError: Cannot read property 'length' of undefined
    at processRecords (http://localhost:8100/build/main.js:117934:52)
    at VirtualScroll.writeUpdate (http://localhost:8100/build/main.js:81238:101)
    at http://localhost:8100/build/main.js:81120:19
    at SafeSubscriber.schedulerFn [as _next] (http://localhost:8100/build/main.js:4139:36)
    at SafeSubscriber.__tryOrUnsub (http://localhost:8100/build/main.js:15413:16)
    at SafeSubscriber.next (http://localhost:8100/build/main.js:15362:22)
    at Subscriber._next (http://localhost:8100/build/main.js:15304:26)
    at Subscriber.next (http://localhost:8100/build/main.js:15268:18)
    at EventEmitter.Subject.next (http://localhost:8100/build/main.js:24047:25)
    at EventEmitter.emit (http://localhost:8100/build/main.js:4113:76)
    at Array.<anonymous> (http://localhost:8100/build/main.js:41216:47)
    at MDTransition.Animation._fireBeforeWriteFunc (http://localhost:8100/build/main.js:31458:34)
    at MDTransition.Animation._beforeAnimation (http://localhost:8100/build/main.js:31369:14)
    at MDTransition.Animation._playDomInspect (http://localhost:8100/build/main.js:31031:14)
4

This is been actively discussed on the github repo:

One solution would be to set customers to any empty array to start with, so length isn’t undefined when you’re loading up your data.

4 Likes
5

It worked for me. I just initialized the array to [] in .ts file. For example customers:any=[] would work in above case.

1 Like
6

use if condition.
<ion-list *ngIf=“customers” [virtualScroll]=“customers”>