firebase - Ionic 4 with firebase - 2 次离线工作 1 次
问题描述
首先,我是开发的初学者,所以请善待:D
然后是我的问题。
我必须使用 firebase 数据库在 ionic 4 上开发一个应用程序。
我有一个数据库中的目录列表,我在 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 次我得到了我的目录显示......
我做了一个console.log 我的回复来自:
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 次是空的 ^^ 看起来很奇怪。
请帮帮我,
此致。
解决方案
我用 app.module.ts 中的 firebase.firestore().enablePersistence({experimentalTabSynchronization:true}) 纠正了它
推荐阅读
- python - 如何使用 pyinstaller 打包多文件夹 python 应用程序
- r - 如何从 R 下载 Yahoo Finance 的数据并将其保存到我的计算机?
- python-3.x - 如何计算python中两个日期时间值之间的差异?
- java - 如何使用 Gson 解析 Volley JSON 对象?
- python - ubuntun 中的 python dfply 包
- vhdl - :[SYNTH 8-944] 0 运算符 sll 和 srr 的定义
- noflo - 错误:组件交互/ListenChange 不适用于基础
- python - 使用 MDS 可视化多维数据集
- python-3.x - 启用使用 python ldap3 的广告用户得到错误 unwillingToPerform 0000052D: SvcErr: DSID-031A12D2, 问题 5003 (WILL_NOT_PERFORM)
- javascript - Javascript复制对象内的属性