Ionic 3中如何通过AngularFireList/AngularFireObject获取Firebase节点键

嘿，我来帮你搞定这个问题！你现在能拿到Home节点下的内容，但拿不到节点本身的键，核心原因是你可能用了只返回纯数据的方法，而没用到能获取元数据（包括键）的API。下面分两种常见场景给你详细解决方案：

场景1：你要获取Address下多个子节点的键（比如Home、Work等节点） #

如果你的Address节点下有多个类似Home的子节点（每个都有name、lat、lng字段），用AngularFireList来获取集合是正确的，这时候通过snapshotChanges()就能拿到每个节点的键：

组件代码 #

import { Component } from '@angular/core';
import { AngularFireDatabase, AngularFireList } from '@angular/fire/database';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Component({
  selector: 'app-address',
  templateUrl: './address.component.html'
})
export class AddressComponent {
  // 定义一个Observable，存储每个节点的键和对应数据
  addressNodes$: Observable<{ key: string; data: any }[]>;

  constructor(private db: AngularFireDatabase) {
    // 指向Address节点下的所有子节点
    const addressRef: AngularFireList<any> = this.db.list('Address');
    
    // 使用snapshotChanges()获取包含元数据的快照，再提取键和数据
    this.addressNodes$ = addressRef.snapshotChanges().pipe(
      map(changes => 
        changes.map(change => ({
          key: change.payload.key, // 这里就是节点的键，比如"Home"
          data: change.payload.val() // 节点下的name、lat、lng数据
        }))
      )
    );
  }
}

模板使用 #

在HTML模板中用async管道订阅Observable，遍历每个节点：

<div *ngFor="let node of addressNodes$ | async">
  <h3>节点键：{{ node.key }}</h3>
  <p>名称：{{ node.data.name }}</p>
  <p>纬度：{{ node.data.lat }}</p>
  <p>经度：{{ node.data.lng }}</p>
  <hr>
</div>

场景2：你直接指向单个Home节点，想获取它的键（即"Home"） #

如果Home是Address下的单个对象节点（只有这一个节点，下面有name、lat、lng），那应该用AngularFireObject而不是AngularFireList（List是用来处理集合的），同样通过snapshotChanges()拿到键：

组件代码 #

import { Component } from '@angular/core';
import { AngularFireDatabase, AngularFireObject } from '@angular/fire/database';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html'
})
export class HomeComponent {
  // 存储单个节点的键和数据
  homeNode$: Observable<{ key: string; data: any }>;

  constructor(private db: AngularFireDatabase) {
    // 指向单个Home节点
    const homeRef: AngularFireObject<any> = this.db.object('Address/Home');
    
    // 提取键和数据
    this.homeNode$ = homeRef.snapshotChanges().pipe(
      map(action => ({
        key: action.key, // 这里就是"Home"这个键
        data: action.payload.val()
      }))
    );
  }
}

模板使用 #

<div *ngIf="homeNode$ | async as home">
  <h3>Home节点键：{{ home.key }}</h3>
  <p>名称：{{ home.data.name }}</p>
  <p>纬度：{{ home.data.lat }}</p>
  <p>经度：{{ home.data.lng }}</p>
</div>

关键说明 #

你之前拿不到键，大概率是用了valueChanges()方法——这个方法只返回节点的纯数据，不会包含键这类元数据。而snapshotChanges()会返回每个节点的完整快照，其中的payload.key就是我们需要的节点键。

如果之前你习惯用valueChanges()，也可以通过添加参数{ preserveSnapshot: true }来获取快照，但更推荐用snapshotChanges()，它的API设计更清晰，专门用于需要元数据的场景。

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