Question

一段时间以来，我一直在试图解决这个问题，似乎无法解决任何问题。我需要从Firebase数据库中捕获任何错误，以便可以相应地在UI中显示和隐藏消息。我是否正确设置了函数调用，还是偏离了基础。任何帮助表示赞赏。

服务：

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { Staff } from '../interfaces/staff';
import { AngularFirestoreCollection, AngularFirestore } from '@angular/fire/firestore';

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

  private staffMembers: Observable<Staff[]>;
  private staffMembersCollection: AngularFirestoreCollection<Staff>;

  constructor(private angularFirestore: AngularFirestore) {
    this.staffMembersCollection = this.angularFirestore.collection<Staff>('staffMembers');
    this.staffMembers = this.staffMembersCollection.snapshotChanges().pipe(
      map(actions => {
        return actions.map(a => {
          const data = a.payload.doc.data();
          const id = a.payload.doc.id;
          return { id, ...data };
        });
      })
    );
  }

  /**
   * 
   */
  getStaffMembers(): Observable<Staff[]> {
    return this.staffMembers;
  }

}

控制器：

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { Staff } from 'src/app/interfaces/staff';
import { LoadingController } from '@ionic/angular';
import { StaffService } from 'src/app/services/staff.service';

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

  staffMembers: Observable<Staff[]>;

  constructor(public loadingController: LoadingController,
    private staffService: StaffService) { }

  ngOnInit() {
  }

  ionViewDidEnter() {
    this.loadStaffMembers();
  }

  /**
   * 
   */
  async loadStaffMembers() {
    const loading = await this.loadingController.create({
      spinner: null,
      cssClass: 'custom-loading',
      backdropDismiss: true
    });

    await loading.present().then(() => {
      this.staffMembers = this.staffService.getStaffMembers();
    }).then(() => {
      loading.dismiss();
    });
  }

}

HTML：

<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>Staff</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-item *ngFor="let sm of (staffMembers | async)">
      <ion-thumbnail slot="start">
        <div *ngIf="sm.imageUrl ; else noImage">
          <img src="{{sm.imageUrl}}">
        </div>
        <ng-template #noImage>
          <img src="../../assets/imgs/Epic_Staff_Placeholder.png">
        </ng-template>
      </ion-thumbnail>
      <ion-label>
        <ion-text color="primary">
          <h1>{{sm.firstName}} {{sm.lastName}}</h1>
        </ion-text>
        <ion-text color="light">
          <h2>{{sm.jobTitle}}</h2>
        </ion-text>
      </ion-label>
    </ion-item>
  </ion-list>
</ion-content>

如何处理Ionic 4和Firebase的错误

0 个答案: