离子应用在初始化完成之前开始工作

我正在使用Ionic实时数据库开发Firebase条形码扫描仪应用程序。
在启动时，应用程序应同步来自Firebase的数据。但是以某种方式看来，应用程序在完成初始化/与数据库的同步之前就开始工作。因此，用户将看不到任何数据。

几次重新启动后，应用程序完成了同步数据的操作，用户最终可以看到数据。
请指导我解决此问题。该应用程序将在用户每次使用该应用程序时同步数据吗？

谢谢！

tabs.page.ts

import { Component,OnInit } from '@angular/core';
import { BarcodeScanner } from '@ionic-native/barcode-scanner/ngx';
import { DataServiceService } from '../../app/data-service.service';
import { Toast } from '@ionic-native/toast/ngx';
import { Platform,AlertController } from '@ionic/angular';
import * as moment from 'moment';
@Component({
selector: 'app-tabs',templateUrl: './tabs.page.html',styleUrls: ['./tabs.page.scss'],})
export class TabsPage implements OnInit {
productViews: any = {};
productViewsbyUser: any[] = [];
isProdcutsAvailable = true;
selectedProduct: any;
isCameraOpen = false;
showScan = false;
products: any[] = [];
productFound = true;
displayusername: any;
exitModalDisplayed = false;
constructor(
private barcodeScanner: BarcodeScanner,private toast: Toast,public platform: Platform,public dataService: DataServiceService,public alertCtrl: AlertController) {
console.log(`Tabs Page called`);
}
ngOnInit() {
this.productHunt();
}
productHunt() {
this.dataService.getProducts()
.subscribe((response) => {
this.products = response;
console.table('products ',this.products);
});
}
getMoment() {
return moment().milliseconds(0);
}
// Start scanning procedure
scan() {
this.selectedProduct = {};
this.isCameraOpen = true;
this.showScan = true;
this.barcodeScanner.scan().then((barcodeData) => {
setTimeout(() => {
this.isCameraOpen = false;
},500);
if (barcodeData.cancelled) {
return;
}
console.log(`barcodeData`,barcodeData);
this.selectedProduct = this.products.find(product => product.prodId === barcodeData.text);
if (this.selectedProduct !== undefined) {
this.selectedProduct.scannedAt = this.getMoment().toISOString();
// this.selectedProduct.username = this.displayusername(); // TO TEST !!!
this.productFound = true;
// insert product views with firebase generated based key
this.dataService.insertProductViewAnalytics(this.selectedProduct)
.subscribe(() => {
console.log(`Product view analytics inserted in Firebase`);
this.initScanHistoryData();
});
} else {
this.productFound = false;
this.toast.show(`Product not found`,'5000','center').subscribe(
toast => {
console.log(toast);
}
);
}
},(err) => {
setTimeout(() => {
this.isCameraOpen = false;
},1000);
this.toast.show(err,'center').subscribe(
toast => {
console.log(toast);
}
);
});
}
async initScanHistoryData() {
this.dataService.getProductViewsForUser()
.subscribe((response) => {
this.productViews = response;
const userProductViews = [];
// tslint:disable-next-line: forin
for (const key in this.productViews) {
userProductViews.push(this.productViews[key]);
}
userProductViews.sort(function (a,b) {
return moment(b.scannedAt).diff(moment(a.scannedAt));
// ENTER USER NAME HERE???
});
this.productViewsbyUser = userProductViews;
console.log('user productViews ',userProductViews);
if (this.productViewsbyUser.length) {
this.isProdcutsAvailable = true;
} else {
this.isProdcutsAvailable = false;
}
console.log('productViews ',this.productViews);
});
}
}


data-service.service.ts

import { Component,this.productViews);
});
}
}


看起来您两次粘贴了Tabs组件而不是数据服务，但是如果您的目标是使其等待，那么在我看来，您只是没有在异步函数上添加等待，例如：>

async initScanHistoryData() {
await this.dataService.getProductViewsForUser()
...
}


话虽如此，如某些评论中所述，这可能不是最佳做法，并且为了提供更好的用户体验，您应该允许异步功能“同步”工作，加载页面并显示向用户显示微调器或一些反馈，以表明在数据从数据库返回之前，数据库仍在获取中。

我终于使用此解决方案来解决此问题：https://forum.ionicframework.com/t/how-to-reload-page-every-time-click-on-tabs/115947/4

非常感谢您的帮助！ ：）