如何将数据作为对象从 Firebase 获取到服务，然后正确地获取到页面（Angularfire + ionic4）？

Question

我正在尝试通过 firebase.service:

从 Firebase Realtimedatabase 获取数据到我的 mypage.page

• 我可以在 firebase.service 和 mypage.page 中获取简单数据（例如字符串），但我无法将对象加载到 mypage.page。
• 在控制台中我收到一堆错误消息 Cannot read properties of undefined (reading 'id')。

控制台日志：

core.js:6479 ERROR TypeError: Cannot read properties of undefined (reading 'id')
    at MypagePage_Template (template.html:8)
    at executeTemplate (core.js:9598)
    at refreshView (core.js:9464)
    at refreshComponent (core.js:10635)
    at refreshChildComponents (core.js:9261)
    at refreshView (core.js:9514)
    at refreshEmbeddedViews (core.js:10589)
    at refreshView (core.js:9488)
    at refreshComponent (core.js:10635)
    at refreshChildComponents (core.js:9261)

如何将 Object 通过 Promise 从 firebase.service 传递到 mypage.page？

---

mypage.page.ts代码：

import { Component, OnInit } from '@angular/core';
import { DataObject, FirebaseService } from '../firebase.service';

@Component({
  selector: 'app-mypage',
  templateUrl: './mypage.page.html',
  styleUrls: ['./mypage.page.scss'],
})
export class MypagePage implements OnInit {
  localData: DataObject;

  constructor(private firebaseService: FirebaseService) {
    this.firebaseService.getData().then(data => {
      this.localData = data;
   }).catch((error) => {
    console.error(error);
  });
  }

  ngOnInit() {
  }

}

firebase.service.ts代码：

import { Injectable } from '@angular/core';
import { AngularFireDatabase } from '@angular/fire/compat/database';
import { DatabaseReference } from '@angular/fire/compat/database/interfaces';

export interface DataObject{
  id: string;
  data: string;
}

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

  constructor(private db: AngularFireDatabase) {
    this.databaseRef = db.database.ref(); //Create databaseReference
  }

  getData(): Promise<any> {
    return this.databaseRef.child('data').get().then((snapshot) => {
      if (snapshot.exists()) {
        return {id: '1', data: snapshot.val()};
      } else {
        return null;
      }
    }).catch((error) => {
      console.error(error);
    });
  }
}

mypage.page.html代码：

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

<ion-content>
  <ion-label>{{ localData.id }}</ion-label>
</ion-content>

Answer 1

这应该按预期工作，您得到的错误是因为 localData 确实是 undefined，直到数据来自网络。

您有 2 个解决方案：

1. 要么给localData一个初始值，这样就不再是undefined:

export class MypagePage implements OnInit {
  localData: Partial<DataObject> = {};
  // ...
}

2. 在标签上放一个 ngIf 并且在数据还没有的时候不要显示它：

<ion-content>
  <ion-label *ngIf="localData">{{ localData.id }}</ion-label>
</ion-content>