Fehler bei der Verwendung von VirtualScroll zum Anzeigen von Daten mit HTTP-Anforderung in ionic 2

Question

Ich versuche, virtuelle Bildlauf in Ionic 2 zu verwenden. Der virtuelle Bildlauf sollte die Elemente zeigen, abgerufen von einer http-Anfrage. Bei der Verwendung von * ngFor alles klappt gut, aber wenn virtuellen Scroll mit erhalte ich den Fehler:

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; 
    } 

interisting Auch wenn auf einem anderen Reiter klicken und Zurück zu dieser Ansicht klicken Ich sehe alle Informationen, die von Anfang an hätten angezeigt werden sollen.

Dank für die Hilfe;)

Answer 1

hatte ich das gleiche Problem in meinem Code. Ich löste es, indem ich das Attribut *ngIf zu Ihrer Vorlage hinzufügte und prüfte, ob das Objekt existiert oder nicht. 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'"> 
... 

Ich hat einige zusätzliche Kontrollen innerhalb der *ngIf -Aussage