Ionic-framework: Virtual Scroll: not working with Ionic2.rc0

[GeeKanJi]

Hello,

I migrated my project to Ionic2.rc0, and i have the following error:

polyfills.js:3 Unhandled Promise rejection: Template parse errors:
Can't bind to 'virtualTrackBy' since it isn't a known property of 'ion-card'.
1. If 'ion-card' is an Angular component and it has 'virtualTrackBy' input, then verify that it is part of this module.
2. If 'ion-card' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
 ("                    (click)="ViewArticle($event, article, null)"

                              [ERROR ->][virtualTrackBy]="id"

To isolate the problem, I created a new project and I added the virtual scroll as below:

Template:

<ion-list [virtualScroll]="items">
    <ion-list-header>Follow us on Twitter</ion-list-header>
    <ion-item *virtualItem="let item">
      <ion-icon name="ionic" item-left></ion-icon>
      {{item}}
    </ion-item>
  </ion-list>

Component:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  templateUrl: 'contact.html'
})
export class ContactPage {

  public items: Array<string> = [];

  constructor(public navCtrl: NavController) {
    for(let i = 0; i < 100; i++)
    {
      this.items.push('name' +i);
    }
  }
}

When i go to the contact page, i have the following error:

ORIGINAL EXCEPTION: Cannot read property 'indexOf' of undefined
ORIGINAL STACKTRACE:
TypeError: Cannot read property 'indexOf' of undefined
    at calcHeight (http://localhost:8100/build/main.js:64758:21)
    at calcDimensions (http://localhost:8100/build/main.js:64740:26)
    at readDimensions (http://localhost:8100/build/main.js:64952:17)
    at VirtualScroll.update (http://localhost:8100/build/main.js:64964:9)
    at VirtualScroll.ngAfterContentInit (http://localhost:8100/build/main.js:64919:18)
    at DebugAppView._View_ContactPage0.detectChangesInternal (ContactPage.ngfactory.js:219:65)
    at DebugAppView.AppView.detectChanges (http://localhost:8100/build/main.js:10805:14)
    at DebugAppView.detectChanges (http://localhost:8100/build/main.js:10910:44)
    at DebugAppView.AppView.detectViewChildrenChanges (http://localhost:8100/build/main.js:10831:19)
    at DebugAppView.AppView.detectChangesInternal (http://localhost:8100/build/main.js:10816:14)
ERROR CONTEXT:
DebugContext {_view: _View_ContactPage0, _nodeIndex: 11, _tplRow: 9, _tplCol: 2}
Uncaught Error: Error in ./ContactPage class ContactPage - inline template:9:2 caused by: Cannot read property 'indexOf' of undefined

Cordova CLI: 6.3.0
Gulp version: CLI version 1.2.2
Gulp local:
Ionic Framework Version: 2.0.0-rc.0
Ionic CLI Version: 2.1.0
Ionic App Lib Version: 2.1.0-beta.1
OS:
Node Version: v5.12.0

[jgw96]

Hello, thanks for opening an issue with us! Would you mind posting a repo I can use to reproduce this issue?

[GeeKanJi]

Thanks for your answer.

Git repository here:
https://github.com/jeromeXoo/ionic2.rc0.Virtual-Scroll-Not-Working

[ckaeslin]

I figured out that somehow the approxItemHeight is undefined.
So a workaround is to set it manually (since default is 40px I also used 40px http://ionicframework.com/docs/v2/api/components/virtual-scroll/VirtualScroll/#input-properties):

<ion-list [virtualScroll]="items" approxItemHeight="40px">

  <ion-item *virtualItem="let item">
    {{ item }}
  </ion-item>

</ion-list>

This code is working for me with:
Cordova CLI: 6.3.0
Gulp version: CLI version 3.9.1
Gulp local: Local version 3.9.1
Ionic Framework Version: 2.0.0-rc.0
Ionic CLI Version: 2.1.0
Ionic App Lib Version: 2.1.0-beta.1
ios-deploy version: Not installed
ios-sim version: 5.0.8
OS: Mac OS X El Capitan
Node Version: v5.8.0
Xcode version: Xcode 8.0 Build version 8A218a

[ckaeslin]

I've found the issue in the code and created a PR https://github.com/driftyco/ionic/pull/8350

[GeeKanJi]

Hello,

Thanks for your feedback.

this one solve the following error:

ORIGINAL EXCEPTION: Cannot read property 'indexOf' of undefined

So i can run the blank project with Virtual Scroll without error.

Anyway, i still have the first error in my project:

polyfills.js:3 Unhandled Promise rejection: Template parse errors:
Can't bind to 'virtualTrackBy' since it isn't a known property of 'ion-card'.

To reproduce in the blank/simple project, i have added "[virtualTrackBy]="id". And I have the following error:

Unhandled Promise rejection: Template parse errors:
Can't bind to 'virtualTrackBy' since it isn't a known property of 'ion-item'.
1. If 'ion-item' is an Angular component and it has 'virtualTrackBy' input, then verify that it is part of this module.
2. If 'ion-item' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
 (">
    <ion-list-header>Follow us on Twitter</ion-list-header>
    <ion-item *virtualItem="let item" [ERROR ->][virtualTrackBy]="id">
      <ion-icon name="ionic" item-left></ion-icon>
      {{item}}
"): ContactPage@11:38 

Updated repository:
https://github.com/jeromeXoo/ionic2.rc0.Virtual-Scroll-Not-Working

[ckaeslin]

This is a different problem.

virtualTrackBy needs a function as input and should be set on ion-list

this code should work

<ion-content>
  <ion-list [virtualScroll]="items" approxItemHeight="40px" [virtualTrackBy]="customTrackBy">
    <ion-list-header>Follow us on Twitter</ion-list-header>
    <ion-item *virtualItem="let item" >
      <ion-icon name="ionic" item-left></ion-icon>
      {{item}}
    </ion-item>
  </ion-list>
</ion-content>

export class ContactPage {

  public items: Array<any> = [];

  constructor(public navCtrl: NavController) {
    for(let i = 0; i < 100; i++)
    {
      this.items.push({id: i,
         name:'name' +i});
    }
  }

  customTrackBy(index, item) {
    return item.id;
  }

}

let me know if you need further explanations

[GeeKanJi]

Thank you for your explanation.

I was bad using virtualTrackBy function. This does not create an error in previous versions of Ionic.

I close this issue.
Thanks again for your help.

[dalbir]

Virtual Scroll show few items (only 4 items but list have 2003)

HTML Code

[virtualTrackBy]="PayID"
[approxItemHeight]="'270px'"
[approxHeaderWidth] ="'0px'"
[approxHeaderHeight] ="'0px'">

{{ item.PayCode }} - {{ item.CorpNm }} - {{ item.ContactNo }}

{{ item.ShopCount }}

Please help

[GeeKanJi]

Hi,

Could you try with this:

<ion-list [virtualScroll]="Searchpayers" [virtualTrackBy]="PayID" approxItemHeight="270px" approxItemWidth="100%" approxHeaderWidth ="0px" approxHeaderHeight ="0px"> <ion-item *virtualItem="let item" (click)="SelectPayers(item)">

There is a mix of single and double quote in your code

[ionitron-bot[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.