AngularFire 5中如何返回数据项的$key字段

我完全懂你的困扰——AngularFire 5调整了API，valueChanges()默认只返回数据实体，不再包含Firebase节点的$key。不过通过RxJS的map操作符配合snapshotChanges()就能完美解决这个问题，具体实现步骤如下：

核心思路 #

• 替换valueChanges()为snapshotChanges()：这个方法会返回包含Firebase快照信息的Observable，每个快照对象里包含节点的key属性和数据负载。
• 使用map操作符处理每个快照：把快照的key（也就是你需要的$key）和快照里的数据合并成一个新对象。

完整实现代码 #

首先确保你导入了必要的依赖和RxJS操作符：

import { map } from 'rxjs/operators';
import { AngularFireDatabase, SnapshotAction } from '@angular/fire/database';

然后修改你的组件代码：

export class NavigationComponent {
  items: Observable<any[]>;

  constructor(db: AngularFireDatabase) {
    this.items = db.list('/pages', ref => 
      ref.limitToLast(100).orderByChild('sortOrder')
    ).snapshotChanges().pipe(
      map((actions: SnapshotAction[]) => {
        return actions.map(action => {
          // 获取节点的原始数据
          const data = action.payload.val();
          // 获取节点key并映射为你需要的$key字段
          const $key = action.payload.key;
          // 返回合并了$key的新对象
          return { $key, ...data };
        });
      })
    );
  }
}

代码说明 #

• snapshotChanges()返回的是Observable<SnapshotAction[]>，每个SnapshotAction包含当前节点的完整快照信息，包括键和数据。
• 在map操作中，我们遍历每个快照动作，提取payload.key作为$key，再用扩展运算符把它和原始数据合并，这样你就能在模板或组件逻辑中直接访问item.$key了。
• 原有的查询逻辑（limitToLast(100)和orderByChild('sortOrder')）完全保留，不会影响数据的筛选与排序功能。

这样修改后，你的items Observable就会包含每个节点的$key字段，和AngularFire 4中的行为完全一致。

内容的提问来源于stack exchange，提问作者eat-sleep-code