Прежде всего, я новичок в разработке, так что будьте добры, пожалуйста: 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>
Так что проблема в том, когда я запускаю свое приложениебез интернета, 1 из 2 раз, когда я получил свою директорию, показывает ...
Я сделал 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;
})
})
1 из 2 время пусто ^^ кажется очень странным.
Помогите мне, пожалуйста,
С уважением.