My main page has a popover which has to display a list that I have in an object called “indices” when printing with a * ngFor it found me perfectly, the problem I have is that this list can have between 50 and 2000 items so which when printing with the * ngFor becomes very slow or the memory gives error, so I wanted to put a VirtualScroll but it does not display anything.
My system information:
Cordova CLI: You have been opted out of telemetry. To change this, run: cordova telemetry on.
6.5.0
Ionic Framework Version: 2.2.0
Ionic CLI Version: 2.2.3
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.1.4
ios-deploy version: 1.9.1
ios-sim version: 5.0.13
OS: macOS Sierra
Node Version: v7.10.0
Xcode version: Xcode 8.3.2 Build version 8E2002
popover.html:
<ion-content>
<ion-list [virtualScroll]="indices" [approxItemHeight]=" '40px' ">
<ion-item *virtualItem="let item">
{{ item.indice }}
</ion-item>
</ion-list>
</ion-content>
popover.ts:
import { Component } from '@angular/core';
import { NavController, NavParams, ViewController } from 'ionic-angular';
import { Content } from 'ionic-angular';
@Component({
selector: 'popover',
templateUrl: 'popover.html'
})
export class PopoverVisualizadorPage {
indices: any[] = [];
constructor(public navCtrl: NavController, public navParams: NavParams,private viewCtrl: ViewController) {
}
ngOnInit() {
if (this.navParams.data) {
this.indices = this.navParams.data.indices;
console.log(this.indices);
}
}
}