时间戳

首页 > 解决方案 > 为什么firebase数据不能加载到ionic中的html模板上

angular - 为什么firebase数据不能加载到ionic中的html模板上

问题描述

我一直在尝试使用 ionic 从数据库中检索数据。问题是无论我尝试什么，数据都不会显示在我的离子页面上。我什至尝试过以下教程：

只是以防我错了或脱节，但仍然是同样的问题。在网上搜索帮助没有成功后，我恢复到原来的，问题是它只是显示一个空白页，它没有给出任何错误。

对于 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>

我正在使用离子版本 5.4.9

标签： angularfirebaseionic-framework

解决方案

因此，为了避免再次出现此类错误，我更改了将数据从 ngOnInit 加载到 ionViewWillEnter 的函数，而不是：

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

  }

在我使用的组件页面上：

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

  }

推荐阅读