Ionic 3 - It is possible to use VirtualScroll to display data from Observable (stream of data)?

Viewed 647

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) );
    }
0 Answers
Related