如何使用Angular获取Google Script同步到Firebase Realtime Database的JSON数据

核心问题说明 #

你当前代码中使用的afs（AngularFirestore）是Firebase云Firestore数据库的操作SDK，而你存储数据的是Firebase Realtime Database，二者是完全独立的两款数据库产品，SDK不通用，所以现有代码无法获取到你同步的RTDB数据。
不管数据是通过Google Script从Google Sheet同步还是其他方式写入RTDB，只要数据成功存入RTDB，检索逻辑和普通RTDB操作完全一致，不需要特殊适配。

解决步骤 #

1. 先确保你已经在项目中安装并导入了Angular Realtime Database的依赖模块，在你的app.module.ts中导入对应模块：

import { AngularFireDatabaseModule } from '@angular/fire/compat/database';
// imports数组中加入AngularFireDatabaseModule

2. 修改service.ts代码，使用Realtime Database的SDK操作数据：

import { Injectable } from '@angular/core';
import { AngularFireDatabase } from '@angular/fire/compat/database';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class YourService {
  // 注入AngularFireDatabase，而非AngularFirestore
  constructor(private db: AngularFireDatabase) { }

  // 获取JSON格式的全量数据，参数为你要获取的RTDB节点路径
  getRealData():Observable<any>{
    // 如果你要获取根节点所有数据，路径填 '/'；如果要获取指定子节点数据，替换为对应路径，比如 '/sheetSyncData'
    return this.db.object('/').valueChanges();
  }

  // 如果需要按条件检索数据，可以使用list方法加查询规则
  getFilteredData(fieldName: string, matchValue: any): Observable<any> {
    return this.db.list('/你的数据节点路径', ref => 
      ref.orderByChild(fieldName).equalTo(matchValue)
    ).valueChanges();
  }
}

3. 你的组件代码不需要修改，订阅后拿到的返回值就是标准JSON格式的RTDB数据，可直接使用：

ngOnInit() {
   this.auth.getRealData().subscribe(res=>console.log(res));
}

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