Ionic 4 with firebase - 2 次离线工作 1 次

Question

首先，我是开发的初学者，所以请善待：D

然后是我的问题。

我必须在 ionic 4 上使用 firebase 数据库开发应用程序。

我有一个数据库中的目录列表，我在 ngOnInit 函数中的列表组件中获得了这是我的代码：

import { Component, OnInit } from '@angular/core';
import { NavigationExtras } from '@angular/router';
import { NavController } from '@ionic/angular';
import { AuthentificationService } from 'src/app/services/authentification.service';
import * as firebase from 'firebase/app';
@Component({
  selector: 'app-listing-directory',
  templateUrl: './listing-directory.component.html',
  styleUrls: ['./listing-directory.component.scss'],
})

export class ListingDirectoryComponent implements OnInit {

constructor(
    private navCtrl: NavController,
    private auth: AuthentificationService) {

  }

ngOnInit() {
    var userUid = this.auth.getUidUser();
    var db = firebase.firestore();
    db.collection('users').doc(userUid).collection('directory').onSnapshot(res => {
      let data = [];
      res.forEach(res => {
        data.push({
          "id": res.id,
          "title": res.data().title,
          "subtitle": res.data().description,
          "image": "assets/imgs/gallery/full-gallery-content-8/12.jpg",
          "items": []
        })
        this.directories = data;
      })
    })

  }

这是我的看法：

<ion-app>

  <ion-header>
    <ion-toolbar box-shadow style="padding-right:10px;">
      <ion-title>
        Liste des dossiers
      </ion-title>
      <ion-button (click)="switchToAddDirectory()" size="small" style="--background: #FB5135; --background-focused: #FB5135; --background-hover: #FB5135;" class="sm-button button-small " slot="end">
        <img style="max-width: 50%;" src="../../../assets/icon/add-plus-button.png">
      </ion-button>
    </ion-toolbar>
  </ion-header>

  <!-- Content -->
  <ion-content >

    <!-- PAGE 3 -->
    <cs-image-gallery-layout-3 [data]="directories" (onItemClick)="onItemClick($event)">
    </cs-image-gallery-layout-3>

  </ion-content>
  <ion-footer style="background:white; padding-right:10px " class="ion-text-end">
      <ion-button (click)="signOut()" size="small" style="--background: #FB5135; --background-focused: #FB5135; --background-hover: #FB5135;" class="sm-button button-small " slot="end">
          Deconnexion
        </ion-button>
  </ion-footer>
</ion-app>

和我的 cs-image-gallery-layout-3 组件

import { Component, Output, EventEmitter, Input, OnChanges } from '@angular/core';
import { NavController } from '@ionic/angular';

@Component({
  selector: 'cs-image-gallery-layout-3',
  templateUrl: 'image-gallery-layout-3.page.html',
  styleUrls: ['image-gallery-layout-3.page.scss'],
})
export class ImageGalleryLayout3Page implements OnChanges {
  @Input() data: any;

  @Output() onItemClick = new EventEmitter();
  @Output() onFavorite = new EventEmitter();

  constructor(private navCtrl: NavController) {


   }

  ngOnInit(): void {
    //Called after the constructor, initializing input properties, and the first call to ngOnChanges.
    //Add 'implements OnInit' to the class.
    console.log(this.data)
  }
  ngOnChanges(changes: { [propKey: string]: any }) {
    console.log(changes)
    this.data = changes['data'].currentValue;
  }

总结一下我的组件视图：

<ion-grid>
  <ion-row *ngIf="data != null">
    <ion-col class="ion-no-margin" size="12" size-md="6" >
      <ion-card class="ion-no-margin" background-size box-shadow [ngStyle]="{'background': 'white'}"
        (click)="redirectToAdd($event)">
        <ion-card-content transparent class="ion-text-center">
          <h2 text-size-xl text-color-accent font-bold class="ion-text-wrap">Ajouter Dossier</h2>
          <h2 text-size-xs text-color-primary font-medium class="ion-text-wrap">Cliquer pour ajouter un dossier</h2>
        </ion-card-content>
      </ion-card>
    </ion-col>
    <ion-col class="ion-no-margin" size="12" size-md="6" *ngFor="let item of data ;let i = index ">
      <ion-card class="ion-no-margin" background-size box-shadow
        [ngStyle]="{'background-image': 'url(' + item.image + ')'}" (click)="onItemClickFunc(item, i, $event)">
        <ion-card-content transparent class="ion-text-center">
          <h2 text-size-xl text-color-accent font-bold class="ion-text-wrap">{{item.title}}</h2>
          <h2 text-size-xs text-color-primary font-medium class="ion-text-wrap">{{item.subtitle}}</h2>
        </ion-card-content>
      </ion-card>
    </ion-col>

  </ion-row>
</ion-grid>

所以问题是当我在没有互联网的情况下启动我的应用程序时，2 次中有 1 次我得到了我的目录显示......

我对我的回复做了一个控制台日志：

db.collection('users').doc(userUid).collection('directory').onSnapshot(res => {
          let data = [];
          res.forEach(res => {
            data.push({
              "id": res.id,
              "title": res.data().title,
              "subtitle": res.data().description,
              "image": "assets/imgs/gallery/full-gallery-content-8/12.jpg",
              "items": []
            })
            this.directories = data;
          })
        })

2 次中有 1 次是空的 ^^ 看起来很奇怪。

请帮帮我，

最好的问候。

Answer 1

我纠正了它 app.module.ts 中的 firebase.firestore().enablePersistence({experimentalTabSynchronization:true})