My current implementation doesn't work. I'm getting an error but the data is displayed after closing error message. I'm also using ASYNC pipe in [virtualScroll]:
virtual-scroll.js:591 Uncaught TypeError: Cannot read property 'length' of null
pages/routes/routes.html
<ion-list [virtualScroll]="(routesList$ | async )" approxItemHeight="85px">
<ion-item *virtualItem="let route" (click)="openDetails($event, route)">
....
</ion-item>
</ion-list>
pages/routes/routes.ts
export class RoutesPage implements OnInit{
routesList$: Observable<Route[]>;
constructor(public navCtrl: NavController,
public navParams: NavParams,
public loadingCtrl: LoadingController,
public alertCtrl: AlertController,
private routesProvider: RoutesProvider) {
}
ngOnInit() {
this.routesList$ = this.routesProvider.getRoutesLocal();
}
openDetails(event, item) {
this.navCtrl.push('RouteDetailsPage', {
route: item
});
}
}
providers/routes.ts
getRoutesLocal(): Observable<Route[]> {
let promise = this.storage.get(this.routesList.storageName).then(res => res);
return Observable.fromPromise(promise).map(res => JSON.parse(res) );
}