Ionic2 "ionViewDidEnter"メソッドが初めて初速が遅い

Question

初回の負荷が非常に遅い理由を教えてください。 2回目は正常です。実際のデバイスにも同じ遅延があります。添付の​​ビデオをご覧ください。

注：はここでの問題は、私はそれがすべてfine.Doを作業している削除firebaseバインドthis.eventData.getEventList().on('value', snapshot => {}あなたは違っそれを行う方法を知っている ？

ビデオ：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。