CODEWITHSUNDEEP
angularionic2
A. Ilazi
A. Ilazi

Reputation: 341

Error when using virtualScroll for displaying data fetched with http request in ionic 2

I am trying to use virtual scroll in Ionic 2. The virtual scroll should show the elements fetched by a http request. When using *ngFor everything works out fine but when using virtual scroll I get the Error:

browser_adapter.js:77 TypeError: Cannot read property 'indexOf' of undefined

HTML:

 <ion-list [virtualScroll]="posts" *ngIf="!cantDoRequest">
            <ion-div *virtualItem="#post">
                <ion-item-sliding *ngIf="post.bereich.indexOf('CallCenter')>-1 && callc == 'true'">
                    <button ion-item text-wrap (click)="itemTapped($event, post)" *ngIf="post.bundesland.indexOf('Baden-Württemberg')>-1 && baden == 'true'">
...

JS

import {Platform, Page, NavController, NavParams, Storage, SqlStorage} from 'ionic-angular';
import {Http} from '@angular/http';
import 'rxjs/add/operator/map';

@Page({
    templateUrl: 'build/pages/page1/page1.html'
})
export class Page1 {
    static get parameters(){
        return [[Http], [NavController], [NavParams], [Platform]];
    }
    constructor(http, nav, navParams, platform) {
        this.platform = platform;
        this.http = http;
        this.posts = null;
        this.http.get('http://promotionapp.de/json_test.php').map(res => res.json()).subscribe(data => {
            this.posts = data.data.children;
        }, (error) => {
            this.cantDoRequest = "Error";
        });
        this.nav = nav;
    }

Also interisting when clicking on another tab and clicking back to this view I see all information that should have been shown from the start.

Thanks for help ;)

Upvotes: 0

Views: 1250

Answers (1)

John
John

Reputation: 11439

I had the same issue in my code. I solved it by adding the attribute *ngIf to your template, checking if the object exists or not. F.eks:

<ion-list [virtualScroll]="posts" *ngIf="!cantDoRequest">
            <ion-div *virtualItem="#post">
                <ion-item-sliding *ngIf="post && post.bereich && post.bereich.indexOf('CallCenter')>-1 && callc == 'true'">
                    <button ion-item text-wrap (click)="itemTapped($event, post)" *ngIf="post && post.bundesland && post.bundesland.indexOf('Baden-Württemberg')>-1 && baden == 'true'">
...

I added some extra checks inside the *ngIf-statement

Upvotes: 2

Related Questions