Ionic2" ionViewDidEnter"方法第一次很慢

时间:2017-03-03 06:48:51

标签: angular firebase ionic-framework ionic2

你能告诉我为什么以下功能在首次加载时有很大的延迟吗?第二次是正常的。同样的延迟也在实际设备上。请参阅附带的视频。

注意: 这里的问题是firebase bind 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;
  }

}

1 个答案:

答案 0 :(得分:0)

似乎没有检测到更改。尝试将- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { NSData *decryptedData = [self getDecryptedData]; return YES; } 打包到push

首先,导入NgZone:

NgZone::run()

然后,注入你的构造函数:

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

然后使用run函数将数据推送到数组中:

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

我不确定这是否适合你,但值得一试。