新版Web SDK查询RTDB列表如何直接获取值而非快照变更？

你所需要的「无需手动处理child_added/child_removed/child_changed事件、直接获取可绑定ngFor的RTDB查询结果」的需求，在angularfire、rxfire、新版firebase SDK中都可以实现，具体实现方案如下：

方案1：AngularFire实现（Angular场景首选） #

AngularFire已经对RTDB的监听逻辑做了完整封装，不需要手动处理任何快照或子变更事件，直接调用valueChanges()即可获取实时更新的数组数据流。

代码示例 #

1. 组件逻辑

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

// 自定义你的数据结构
interface ItemType {
  id?: string;
  title: string;
  // 其他业务字段
}

export class DemoComponent {
  rtdbList$: Observable<ItemType[]>;

  constructor(private db: AngularFireDatabase) {
    // 写法1：仅获取数据内容，不包含节点key
    this.rtdbList$ = this.db.list<ItemType>('你的RTDB节点路径').valueChanges();

    // 写法2：需要保留节点key作为id时使用
    // this.rtdbList$ = this.db.list<ItemType>('你的RTDB节点路径').snapshotChanges().pipe(
    //   map(changes => changes.map(c => ({ id: c.payload.key, ...c.payload.val() })))
    // )
  }
}

2. 模板绑定

<div *ngFor="let item of rtdbList$ | async">
  {{ item.title }}
</div>

说明：valueChanges()内置了全量子变更事件的监听逻辑，数据更新时会自动返回最新的完整数组，不需要额外编写事件处理代码。

方案2：rxfire实现 #

rxfire作为官方封装的RxJS适配库，也提供了开箱即用的RTDB数组监听方法：

import { list } from 'rxfire/database';
import { getDatabase, ref } from 'firebase/database';
import { map } from 'rxjs';

const db = getDatabase();
const targetRef = ref(db, '你的RTDB节点路径');
// 返回的可观察对象会自动同步最新的数组数据
const rtdbList$ = list(targetRef).pipe(
  map(changes => changes.map(c => ({ id: c.snapshot.key, ...c.snapshot.val() })))
);

获取数据流后，绑定逻辑和AngularFire方案一致。

方案3：新版Firebase SDK（v9+）原生实现 #

如果不依赖上层封装库，原生SDK的onValue方法也可以实现该需求，封装为Observable即可直接绑定ngFor：

import { getDatabase, ref, onValue } from 'firebase/database';
import { Observable } from 'rxjs';

// 封装通用的RTDB列表查询方法
function queryRtdbList<T>(path: string): Observable<T[]> {
  const db = getDatabase();
  const listRef = ref(db, path);
  return new Observable(sub => {
    const unListen = onValue(listRef, snapshot => {
      const res: T[] = [];
      snapshot.forEach(child => {
        res.push({ id: child.key, ...child.val() } as T);
      });
      sub.next(res);
    }, err => sub.error(err));
    return () => unListen();
  });
}

// 组件中调用
const rtdbList$ = queryRtdbList<ItemType>('你的RTDB节点路径');

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