Ionic2“ionViewDidEnter”方法第一次非常慢
您能否告诉我为什么下面的功能对首次加载有巨大的延迟?第二次是正常的。同样的延迟也在实际的设备上。请看附加的视频。Ionic2“ionViewDidEnter”方法第一次非常慢
注: 这里的问题是火力绑定this.eventData.getEventList().on('value', snapshot => {}
当我删除所有正在fine.Do你知道该怎么做不同?
的.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;
}
}
似乎没有检测到更改。尝试将您的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。
sorry.no difference.same delay there there。是这个firebase的问题绑定this.eventData.getEventList()。on('value',snapshot => {'? – Sampath
我不这么认为...这看起来好吗..你可以把一个控制台日志里面的回调来查看它是否立即被调用,或者只在视图更新时才被调用? –
在postman中检查你可以看到api调用的持续时间,如果与此相同,那么后端应该快速发送响应 –