使用virtualScroll显示在离子2

时间:2016-05-25 22:56:23

标签: angular ionic2

我正在尝试在Ionic 2中使用虚拟滚动。虚拟滚动应该显示由http请求获取的元素。使用* ng时,一切正常,但使用虚拟滚动时,我得到错误:

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

当点击另一个标签并点击返回此视图时,我也会看到所有应该从头开始显示的信息。

感谢您的帮助;)

1 个答案:

答案 0 :(得分:2)

我的代码中遇到了同样的问题。我通过向模板添加属性*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 - 声明

中添加了一些额外的检查
相关问题