如何将数据作为对象从 Firebase 获取到服务，然后正确地获取到页面(Angularfire + ionic4)? [英] How to get Data as Object from Firebase to Service and then to Page correctly (Angularfire + ionic4)?

问题描述

我正在尝试通过 firebase.service 将数据从 Firebase Realtimedatabase 获取到我的 mypage.page:

I am trying to get data from Firebase Realtimedatabase to my mypage.page via firebase.service:

• 我可以在 firebase.service 和 mypage.page 中获取简单数据(例如字符串)，但我无法将对象加载到 mypage.页面.
• 在控制台中，我收到一堆错误消息无法读取未定义的属性(读取id").

• I can get simple data (strings for example) inside the firebase.service and mypage.page, but I can’t load objects into mypage.page.
• In console I get bunch of error messages 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 代码:

How can I pass Object through Promise from firebase.service to mypage.page?

---

Parent question.

mypage.page.ts code:

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>

推荐答案

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

This should work as expected, the error that you get is because the localData is indeed undefined until the data comes from the network.

您有两种解决方案:

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

1. Either give localData an initial value, so it's no longer undefined:

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

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

1. Put an ngIf on the label and just don't display it while the data is not there yet:

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

这篇关于如何将数据作为对象从 Firebase 获取到服务，然后正确地获取到页面(Angularfire + ionic4)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！