带有@ angular / fire Freeze Web App的Angular

如何解决带有@ angular / fire Freeze Web App的Angular

我在Web应用程序中遇到了奇怪的情况，在5秒钟后完成加载正确的数据和页面呈现后，我的应用程序获得了3 / 3.5秒钟的堆栈，我监视了性能并看到angulr-fire-database重新启动，我没有不明白为什么...看到我的屏幕...绿色区域代表我的Web应用程序完成加载和渲染，红色区域自动开始...

我希望很好地揭露我的问题，我记录了我的代码以获得更好的答案

Package.json

"dependencies": {
"@angular/animations": "^10.0.9","@angular/common": "^10.0.9","@angular/core": "^10.0.9","@angular/fire": "^6.0.2","@angular/forms": "~10.0.9","@angular/platform-browser": "~10.0.9","@angular/platform-browser-dynamic": "~10.0.9","@angular/platform-server": "^10.0.9","@angular/router": "~10.0.9","@angular/service-worker": "^10.0.9","@fullcalendar/angular": "^5.3.1","@fullcalendar/interaction": "^5.3.1","@fullcalendar/resource-timeline": "^5.3.1","@ionic-native/core": "^5.0.0","@ionic-native/splash-screen": "^5.0.0","@ionic-native/status-bar": "^5.0.0","@ionic/angular": "^5.3.1","@ionic/angular-server": "^5.4.0-dev.202009102321.26d3971","@jermeo/ionic4-datepicker": "^1.0.15","@nguniversal/express-engine": "^10.0.2","@stripe/stripe-js": "^1.9.0","@swimlane/ngx-datatable": "^18.0.0","@types/moment": "^2.13.0","cordova-android": "^9.0.0","cordova-plugin-ionic": "^5.4.6","core-js": "^3.6.4","express": "^4.17.1","firebase": "^7.24.0","idb": "^5.0.7","moment": "^2.28.0","rxjs": "^6.5.5","tslib": "^1.10.0","uuid": "^8.3.0","zone.js": "~0.10.2"

beach.service.ts

import { Injectable } from '@angular/core';
import { DatePipe } from '@angular/common';
import { ToastController } from '@ionic/angular';

import { AngularFireDatabase } from '@angular/fire/database';
import { map } from 'rxjs/operators';

import { BeachSeatModel,PalmsDataModel,BeachGuest,BeachPalmsPriceModel } from '../model/beach.model';
import moment from 'moment';
import { HttpClient,HttpHeaders } from '@angular/common/http';
import { AuthService } from './auth.service';

@Injectable({ providedIn: 'root' })
export class BeachServiceProvider {

    userLoggedIn: any;

    constructor(private beachFirebaseDB: AngularFireDatabase,private authService: AuthService,private http: HttpClient,public toastController: ToastController) {
        this.authService.firebaseUser.subscribe(user => {
            if (user) {
                this.userLoggedIn = user.uid;
            }
        });
    }


    getBookedPalme(selectedDateFrom: number,selectedDateTo: number) {
        return this.beachFirebaseDB.list<BeachSeatModel>('beachBookedPalma/',ref => 
          ref.equalTo('deleted: false')).snapshotChanges().pipe(map(date => {
            return date.map(value => {
                const key = value.payload.key;
                const val = value.payload.val();
                if (selectedDateTo >= +val.dateFrom && selectedDateFrom <= +val.dateTo) {
                    return { key,val };
                }
            });
        }));
    }
}

beach.page.ts

checkBeachSeatAvailability() {
    this.phoneNumberSearchField = null;
    this.guestNameSearchField = null;
    let palmsFilterDataRang: {key: string,val: BeachSeatModel}[] = [];

    this.beachServiceSubscription = this.beachService.getBookedPalmeGlobal().subscribe(async 
      palma => {
      palmsFilterDataRang = [];
      const arrayPalmaLength = palma.length;
      for (let index = 0; index < arrayPalmaLength; index++) {
        const element = palma[index];
        if (element !== undefined && !element.deleted) {
          if (this.selectedDateTo >= element.dateFrom && this.selectedDateFrom <= element.dateTo) {
            palmsFilterDataRang.push({key: element.guestReservationId,val: element});
          }
        }
      }
      let palmeArray = [];
      let palmetteArray = [];
      const palmeWorker = new Worker('../beach.worker',{ type: 'module' });
      const palmeRows: any[] = this.palmeRowContainer;
      const palmetteRows: any[] = this.palmetteRowContainer;
      palmeWorker.postMessage(palmsFilterDataRang);
      palmeWorker.onmessage = (result) => {
        palmeArray.push(...result.data.palmeArraySorted);
        palmetteArray.push(...result.data.palmetteArraySorted);
        this.arrayDaPagare.push(...result.data.arrayDaPagare);
        this.arrayVoucher.push(...result.data.arrayVoucher);
        const beachSeatArray = palmeArray.concat(palmetteArray);
        this.searchBeachSeatArray = beachSeatArray;
        this.datatableBeachSeatArray = [...this.searchBeachSeatArray];
        this.setTableCellStatus(palmeArray,palmeRows);
        this.setTableCellStatus(palmetteArray,palmetteRows);
        palmeWorker.terminate();
      };
      // this.beachServiceSubscription.unsubscribe();
      await this.loadBeachSeat.dismiss();
    });
  }

解决方法

好了，我解决了我的问题，在我的服务中，我更改了getBookedPalme（）类

getBookedPalme() { return this.beachFirebaseDB.database.ref('beachBookedPalma/'); }