Ionic-framework: 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?