如何从Observable中获取键？Angular2+TypeScript读取Firebase数据疑问

你当前使用的valueChanges()方法默认只会返回Firebase节点的值，不会包含节点本身的键。要获取键的话，有两种简单且常用的方案：

方案1：给valueChanges()添加idField参数 #

这是最简洁的方式，只需要在调用valueChanges()时传入{ idField: '自定义字段名' }，AngularFire会自动把每个节点的键注入到对应字段中：

export class DashboardComponent implements OnInit { 
  itemsRef: AngularFireList<any>; 
  items: Observable<any[]>; 

  constructor(afDatabase: AngularFireDatabase) { 
    this.itemsRef = afDatabase.list('/user_orders/louro'); 
    // 传入idField，指定将键存入'key'字段
    this.items = this.itemsRef.valueChanges({ idField: 'key' }); 

    this.items.subscribe(val_2 => { 
      val_2.forEach(item => {
        // 直接通过item.key获取Firebase节点键
        console.log('节点键:', item.key);
        // item的其他属性就是节点对应的值
        console.log('节点内容:', item);
      }); 
    }); 
  }

  ngOnInit(): void {}
}

方案2：使用snapshotChanges()获取完整快照 #

如果需要获取更多Firebase节点的元数据（比如节点的变更状态），可以用snapshotChanges()，它返回的快照包含payload.key（节点键）和payload.val()（节点值），我们可以通过RxJS的map操作符把数据整理成需要的格式：

import { map } from 'rxjs/operators'; // 记得导入map操作符

export class DashboardComponent implements OnInit { 
  itemsRef: AngularFireList<any>; 
  items: Observable<any[]>; 

  constructor(afDatabase: AngularFireDatabase) { 
    this.itemsRef = afDatabase.list('/user_orders/louro'); 
    // 用snapshotChanges获取快照，再映射成包含key的对象数组
    this.items = this.itemsRef.snapshotChanges().pipe(
      map(changes => 
        changes.map(c => ({ 
          key: c.payload.key, 
          ...c.payload.val() // 展开节点值的所有属性
        }))
      )
    ); 

    this.items.subscribe(val_2 => { 
      val_2.forEach(item => {
        console.log('节点键:', item.key);
        console.log('节点内容:', item);
      }); 
    }); 
  }

  ngOnInit(): void {}
}

注意点 #

你原来代码里的val_2.keys()是错误的，因为val_2是一个数组，数组的keys()方法返回的是数组索引的迭代器，并不是Firebase节点的键。通过上面两种方案，你就能正确拿到每个节点对应的键啦。

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