在 ionic 2 中使用 virtualScroll 显示通过 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-语句

中添加了一些额外的检查

在 ionic 2 中使用 virtualScroll 显示通过 http 请求获取的数据时出错

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

ionic2

angular