Angular集成Firebase无法显示客户端$key（唯一键）问题求助

我帮你搞定这个问题——你现在拿不到Firebase的唯一键，核心原因是**valueChanges()方法默认只会返回节点的数据内容，不会包含节点本身的键值**。咱们有两种简单的解决办法，选一种适配你的代码就行：

方法一：使用valueChanges({ idField: '字段名' })（推荐，更简洁） #

AngularFire2的valueChanges()支持传入配置参数，通过idField可以指定一个字段名，用来存储每个节点的唯一键。这样你不用手动处理快照，直接就能在数据对象里拿到键。

修改client.ts中的订阅代码 #

把原来的valueChanges()调用改成带参数的版本：

ngOnInit() {
  // 这里指定idField为'$key'，这样返回的client对象就会自带$key属性
  this.clientService.getClients().valueChanges({ idField: '$key' }).subscribe(clients => {
    this.clients = clients;
    this.getTotalOwed();
  });
}

这样你的模板client.html里的{{client.$key}}就可以正常显示了，不需要修改模板代码。

如果你更习惯用key而不是$key，只需要把idField的值改成'key'，然后模板里改成{{client.key}}就行。

方法二：使用snapshotChanges()映射数据 #

如果需要更灵活的处理（比如同时获取元数据），可以用snapshotChanges()，它会返回包含节点快照的Observable，我们可以通过map操作符把键值合并到数据对象中。

步骤1：导入必要的操作符 #

先在client.ts顶部导入map：

import { map } from 'rxjs/operators';

步骤2：修改订阅逻辑 #

ngOnInit() {
  this.clientService.getClients().snapshotChanges().pipe(
    map(changes => 
      changes.map(c => ({ $key: c.payload.key, ...c.payload.val() }))
    )
  ).subscribe(clients => {
    this.clients = clients;
    this.getTotalOwed();
  });
}

这段代码会把每个节点的key（也就是你要的$key）和节点的数据合并成一个新对象，模板里的{{client.$key}}就能正常显示了。

验证修改 #

修改完成后，你可以在subscribe里加一句console.log(clients)，打开浏览器控制台查看每个client对象，确认已经包含了$key（或key）字段，这样模板就能正确渲染了。

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