Ionic2“ionViewDidEnter”方法第一次非常慢

Question

您能否告诉我为什么下面的功能对首次加载有巨大的延迟？第二次是正常的。同样的延迟也在实际的设备上。请看附加的视频。

注： 这里的问题是火力绑定this.eventData.getEventList().on('value', snapshot => {}当我删除所有正在fine.Do你知道该怎么做不同？

视频：Video about this issue

的.html

<ion-card *ngFor="let event of eventList" (click)="goToEventDetail(event.id)" color="secondary"> 
    <ion-card-content> 
     <p>Event Name: <strong>{{event?.name}}</strong></p> 
     <p>Ticket: <strong>${{event?.price}}</strong></p> 
     <p>Cost: <strong>${{event?.cost}}</strong></p> 
     <p>Date: <strong>{{event?.date}}</strong></p> 
    </ion-card-content> 
</ion-card> 

.TS

import { Component } from '@angular/core'; 
import { NavController } from 'ionic-angular'; 
import { EventDetailPage } from '../event-detail/event-detail'; 
import { EventData } from '../../providers/event-data'; 

@Component({ 
    selector: 'page-event-list', 
    templateUrl: 'event-list.html', 
}) 

export class EventListPage { 
    public eventList: any; 
    constructor(public navCtrl: NavController, public eventData: EventData) { 

    } 

    ionViewDidEnter() { 
    this.eventData.getEventList().on('value', snapshot => { 
     let rawList = []; 
     snapshot.forEach(snap => { 
     rawList.push({ 
      id: snap.key, 
      name: snap.val().name, 
      price: snap.val().price, 
      cost: snap.val().cost, 
      date: snap.val().date 
     }); 
     }); 
     this.eventList = rawList; 
    }); 
    } 
} 

provider.ts

import { Injectable } from '@angular/core'; 
import firebase from 'firebase'; 

@Injectable() 
export class EventData { 

    public currentUser: any; 
    public eventList: any; 

    constructor() { 
    this.currentUser = firebase.auth().currentUser.uid; 
    this.eventList = firebase.database().ref('userProfile/' + this.currentUser + '/eventList'); 

    } 

    getEventList(): any { 
    return this.eventList; 
    } 

} 

Answer 1

似乎没有检测到更改。尝试将您的push换成NgZone::run()。

首先，进口NgZone：

import { NgZone } from '@angular/core';

然后，注入在你的构造：

constructor(public zone: NgZone /* ... other injections ... */) { 
    // constructor code ... 
} 

然后使用运行功能将数据推入阵：

snapshot.forEach(snap => { 
    this.zone.run(() => { 
     rawList.push({ 
      id: snap.key, 
      name: snap.val().name, 
      price: snap.val().price, 
      cost: snap.val().cost, 
      date: snap.val().date 
     }); 
    }); 
}); 

我不确定这是否会为你工作，但它值得RY。