Почему данные firebase не загружаются в шаблон html в ionic

Question

Я пытался получить данные из базы данных с помощью ioni c. Проблема в том, что данные не отображаются на моей странице ioni c, что бы я ни пытался. Я даже пробовал из таких руководств, как:

• https://ionicthemes.com/tutorials/about/building-a-ionic-firebase-app-step-by-step
• https://www.javatpoint.com/ionic-firebase (что похоже на то, что я был делаю)

на случай, если я был неправ или не в курсе, но все равно проблема. После безуспешного поиска помощи в Интернете я вернулся к исходному, и проблема в том, что он просто отображает пустую страницу и не дает никаких ошибок.

Для service.ts

import { Injectable } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/firestore';
import { AngularFireAuth } from '@angular/fire/auth';
import * as firebase from 'firebase';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

export interface Location {
  id: string;
    title: string;
    area: number;
    location: string;
    description: Text;
    image: string;
}

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

  private snapshotChangesSubscription: any;
  public currentUser: any;
  private user:any;
  locations: Observable<Location[]>;
  locationsCollection: AngularFirestoreCollection<Location>;

  constructor(
    public afs: AngularFirestore,
    public afAuth: AngularFireAuth
  ){
    this.afAuth.onAuthStateChanged(res => {
      if(res){
       this.user = res;
       console.log('User '+res.uid+' is logged in');
       this.locationsCollection = this.afs.collection<Location>
      //  ('people').doc(res.uid).collection('locations');
       (
         `people/${res.uid}/locations`,
         ref => ref.orderBy('timestamp')
       );

       this.locations = this.locationsCollection.snapshotChanges().pipe(
         map(actions =>{
           return actions.map(a => {
            // console.log('User '+res.uid+' is still logged in');
             const data = a.payload.doc.data();
             const id = a.payload.doc.id;
             return { id, ...data };
           });
          })
       );
      }
      });
  }

  getLocations():Observable<Locations[]>{
      return this.locations;
  }

Для компонента:

import { Component, OnInit } from '@angular/core';
import { LoadingController } from '@ionic/angular';
import { FirebaseService, Location } from '../service/firebase.service';
import {AngularFirestoreCollection } from '@angular/fire/firestore';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-locations',
  templateUrl: './locations.page.html',
  styleUrls: ['./locations.page.scss'],
})
export class LocationsPage implements OnInit {

  locations: Observable<Location[]>;
   locationsCollection: AngularFirestoreCollection<Location>;

  constructor(
    public loadingCtrl: LoadingController,
    private firebaseService: FirebaseService
  ) {}

  ngOnInit() {
    this.locations = this.firebaseService.getLocations();

  }

Для шаблона:

<ion-header>
  <ion-toolbar>
    <ion-title>Locations</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
    <ion-list>
      <ion-item *ngFor="let location of  ( locations | async)">
        <ion-label>{{location.title}}</ion-label>
      </ion-item>
    </ion-list>
</ion-content>

Я использую ioni c версию 5.4.9

Answer 1

Итак, чтобы снова избежать такой ошибки, я изменил функцию для загрузки данных с ngOnInit на ionViewWillEnter, т.е. вместо:

 ngOnInit() {
    this.locations = this.firebaseService.getLocations();

  }

на странице компонентов, которую я использовал:

  ionViewWillEnter() {
    this.locations = this.firebaseService.getLocations();

  }