Angularfire+Ionic4如何正确将Firebase数据经服务传递到页面

问题原因 #

Firebase Realtime Database的get()请求是异步操作，你在构造函数中调用getData()后立即读取服务内的data变量时，网络请求还未完成返回，因此拿到的是初始的undefined值，请求完成后才会给data赋值，这也是控制台日志输出顺序和你预期不符的原因。

解决方案 #

get()方法本身就只会读取一次数据，不会监听后续数据变化，完全符合你的需求，你只需要调整代码逻辑，等待异步请求完成后再给页面变量赋值即可，修改代码如下：

1. 修改 firebase.service.ts #

调整getData()方法直接返回异步请求的Promise，方便外部调用时等待结果：

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

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

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

  getData(): Promise<string | null> {
    return this.databaseRef.child('data').get().then((snapshot) => {
      if (snapshot.exists()) {
        const data = snapshot.val();
        console.log('here is my data', data);
        return data;
      } else {
        console.log('No data available');
        return null;
      }
    });
  }
}

2. 修改 mypage.page.ts #

在ngOnInit生命周期中调用服务方法，等待异步结果返回后再给本地变量赋值：

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

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

  constructor(private firebaseService: FirebaseService) {}

  ngOnInit() {
    this.firebaseService.getData().then(res => {
      if (res) {
        this.localData = res;
        console.log(this.localData);
      }
    });
  }
}

3. 页面代码无需修改 #

mypage.page.html的插值表达式会在localData赋值后，通过Angular的自动变更检测同步更新显示内容。

内容的提问来源于stack exchange，提问作者Jakub Szlaur