virtual-scroll with table row - ionic 4 RC01

[akilude]

Bug Report

Ionic version:
[x] 4.x

Current behavior:
Virtual Scroll throws an error "TypeError: Cannot read property 'context' of undefined" and does not render anything when trying to repeat table rows and data

Expected behavior:
Virtual scroll renders list of objects performantly.

Steps to reproduce:

In a page create an array of objects

testArray = [{name:"test1"}, {name:"test2"}, {name:"test3"}]

In the template , populate a row with the following template

<ion-virtual-scroll [items]="testArray">
    <tr *virtualItem="let item">
	<td>{{item.name}}</td>
    </tr>
</ion-virtual-scroll>

If we replace tr tags with ion-item the error disappears and it renders the elements in the DOM but the elements are not visible.

Other information:

Ionic info:

Ionic:
   ionic (Ionic CLI)             : 4.6.0 
   Ionic Framework           : @ionic/angular 4.0.0-rc.1
   @angular-devkit/build-angular : 0.11.4
   @angular-devkit/schematics    : 7.1.4
   @angular/cli                  : 7.1.4
   @ionic/angular-toolkit        : 1.2.2

System:
   NodeJS : v10.15.0 
   npm    : 6.5.0
   OS     : Windows 7

[akilude]

Here is the full error text

TypeError: Cannot read property 'context' of undefined
at fesm5.js:3778
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391)
at Object.onInvoke (core.js:16156)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:390)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:150)
at NgZone.push../node_modules/@angular/core/fesm5/core.js.NgZone.run (core.js:16070)
at IonVirtualScroll.push../node_modules/@ionic/angular/dist/fesm5.js.IonVirtualScroll.nodeRender (fesm5.js:3767)
at doRender (ffukzwt6.entry.js:1)
at t.writeVS (ffukzwt6.entry.js:1)
at p (ionic.core.js:9)

[coffeymatt]

I have the same issue with a virtual scroll containing an ion-item-sliding, same stack trace.

[adelovelace]

I also have the same issue but with the header implementation!

[FernetB]

I have Cannot read property 'templateRef' of undefined, with the header implementation.

[lincolnthree]

Same issue with ion-item:

    <ion-virtual-scroll [items]="cards"
      [approxItemHeight]="itemHeightFn(null, null)"
      [trackBy]="('id' | trackByProperty)" [headerFn]=headerFn
      [itemHeight]=itemHeightFn>

      <ion-item class="card" *virtualItem="let card" mode=md>

        <ion-label>{{ card.name }}</ion-label>

      </ion-item>
    </ion-virtual-scroll>

[KenKeymolen]

Same issue here.

Error =>
core-ca0488fc.js:62 TypeError: Cannot read property 'context' of undefined
at fesm5.js:4894
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391)
at Object.onInvoke (core.js:17299)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:390)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:150)
at NgZone.push../node_modules/@angular/core/fesm5/core.js.NgZone.run (core.js:17213)
at IonVirtualScroll.push../node_modules/@ionic/angular/dist/fesm5.js.IonVirtualScroll.nodeRender (fesm5.js:4880)
at doRender (ion-virtual-scroll.entry.js:82)
at class_1.push../node_modules/@ionic/core/dist/esm-es5/ion-virtual-scroll.entry.js.class_1.writeVS (ion-virtual-scroll.entry.js:450)
at consumeTimeout (core-ca0488fc.js:117)

HTML =>
<ion-row> <ion-col size="12" size-sm="8" offset-sm="2" class="ion-text-center"> <ion-virtual-scroll [items]="placesToList" approxItemHeight="70px"> <ion-list> <ion-item [routerLink]="['/', 'places', 'tabs', 'discover', place.id] detail *virtualItem="let place"> <ion-thumbnail slot="start"> <ion-img [src]="place.images[0]"></ion-img> </ion-thumbnail> <ion-label> <h2>{{ place.title }}</h2> <p>{{ place.description }}</p> </ion-label> </ion-item> </ion-list> </ion-virtual-scroll> </ion-col> </ion-row>

[zyhzx123e]

Go to fesm5.js:4894
find the else block :

change :
node = (/** @type {?} */ (_this.refMap.get(el))); /** @type {?} */ var ctx = node.context; ctx.$implicit = cell.value; ctx.index = cell.index;

to
node = (/** @type {?} */ (_this.refMap.get(el))); /** @type {?} */ if(!node){ node = _this.itmTmp.viewContainer.createEmbeddedView(_this.getComponent(cell.type), { $implicit: cell.value, index: index }, index); el = getElement(node); _this.refMap.set(el, node); }//added for context undefined var ctx = node.context; ctx.$implicit = cell.value; ctx.index = cell.index;

run again.
thx

[tipycalFlow]

@zyhzx123e it does fix the error even though the rendering is still buggy.

[jsoret]

I have this same error implementing the ion-virtual-scroll with ion-col with ionic 5.
Still no solution?

[weathon]

I get the same problem, but I ctrl-z and then ctrl-y, it works!

[Franco-Alejandro]

Does someone have a solution for this?

[tobium]

any news here

[liamdebeasi]

Thanks for the issue! With the release of Ionic 6 we will be deprecating ion-virtual-scroll in favor of JavaScript Framework solutions. As a result, we have a freeze on new development with the exception of critical bugs, such as security issues.

Using these new virtual scrolling solutions should provide a better developer experience, more performant app, and fewer bugs! We have created migration guides for the main 3 JavaScript Frameworks Ionic supports to make this migration easy for developers.

Migration for Angular users: https://ionicframework.com/docs/angular/virtual-scroll
Migration for React users: https://ionicframework.com/docs/react/virtual-scroll
Migration for Vue users: https://ionicframework.com/docs/vue/virtual-scroll

The documentation for ion-virtual-scroll still exists at https://ionicframework.com/docs/api/virtual-scroll.

ion-virtual-scroll will be removed in Ionic 7. Developers do not need to migrate off ion-virtual-scroll in order to upgrade to Ionic 6 or to continue using it in Ionic 4/5.

I am going to close this issue. Thank you!

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. 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.