Virtual Scroll Check Box Issue

Ionic Framework ionic-v3
1

Ionic Info

cli packages: (/Users/sysquare/Desktop/IonicHome/frontend/node_modules)

@ionic/cli-utils  : 1.19.2
ionic (Ionic CLI) : 3.20.0

global packages:

cordova (Cordova CLI) : 8.0.0

local packages:

@ionic/app-scripts : 3.1.9
Cordova Platforms  : android 7.0.0 ios 4.3.1
Ionic Framework    : ionic-angular 3.9.2

System:

Android SDK Tools : 26.1.1
ios-deploy        : 1.9.2 
Node              : v9.3.0
npm               : 6.1.0 
OS                : macOS High Sierra
Xcode             : Xcode 9.3 Build version 9E145

Environment Variables:

ANDROID_HOME : /Users/sysquare/Library/Android/sdk

Misc:

backend : pro

HTML Code

<ion-list [virtualScroll]=“testList” approxItemHeight=“50px”>
<ion-item *virtualItem=“let member”>
{{member?.testName || ‘N/A’}}
<ion-checkbox color=“btn-purple” (click)=“selectMember(member)” [(ngModel)]=“member.checked”>

Steps to reproduce the behaviour:-

  1. Show 2000 records in list with checkbox.
  2. Tap/Click on 4-5 checkbox
  3. Scroll down list and the checkbox checked appear on another items in list
  4. The above case works fine in *ngFor but the list slows down too much.

Expected behaviour:-
If i select any number of records and scroll the list than another list items should not be shown selected until I click on checkbox.

3 Likes