使用virtualScroll显示离子2中http请求获取的数据时出错

Question

我试图在Ionic 2中使用虚拟卷轴。虚拟卷轴应该显示由http请求获取的元素。当使用*ngFor时，一切都进行得很好，但是当使用虚拟滚动时，我得到了错误：

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

同时，当单击另一个选项卡并单击回此视图时，我会看到从一开始就应该显示的所有信息。

谢谢你的帮助;)

Answer 1

我的代码中也有同样的问题。我通过将属性*ngIf添加到模板中来解决这个问题，检查对象是否存在。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'">
...

我在*ngIf-statement中添加了一些额外的检查