如何在AngularFire2中访问snapshotChanges()返回对象的属性？

嘿，这问题我刚接触AngularFire的时候也踩过坑！核心原因是你没搞清楚snapshotChanges()返回的对象结构——它给你的不是直接的JSON数据，而是包含Firebase快照（DataSnapshot）的Action对象。

你看到的session.payload其实是一个DataSnapshot实例，不是普通的JavaScript对象。虽然| json管道能把它的内容打印出来（因为管道会隐式处理快照的内容），但直接访问.name是不行的，因为快照本身没有这个属性，你得调用它的.val()方法才能拿到实际的数据库数据对象。

给你两种解决办法，推荐第一种更优雅的：

方法1：在服务中转换数据（推荐） #

把数据转换逻辑放在DataService里，让组件拿到直接可用的对象：

// DataService.ts
constructor(private db: AngularFireDatabase) {}
getSessions(uid: string) {
  return this.db.list(`/sessions/${uid}/`).snapshotChanges()
    .pipe(
      // 把每个Action转换成包含key和数据的对象
      map(actions => 
        actions.map(action => ({
          key: action.key,
          // 用展开运算符把快照里的所有数据属性加进来
          ...action.payload.val()
        }))
      )
    );
}

然后你的组件模板就可以直接访问属性了：

<ion-list>
  <ion-item *ngFor="let session of sessionList | async" text-wrap>
    {{ session.name }}
  </ion-item>
</ion-list>

这样做的好处是把数据处理逻辑封装在服务里，组件和模板只需要关心展示，代码更清晰。

方法2：在模板中直接调用.val() #

如果不想修改服务，也可以在模板里直接调用快照的.val()方法：

<ion-list>
  <ion-item *ngFor="let session of sessionList | async" text-wrap>
    {{ session.payload.val().name }}
  </ion-item>
</ion-list>

不过这种方式会把数据处理逻辑放在模板里，不够优雅，后期维护起来也麻烦，所以还是更推荐第一种方法。

为什么{{ session.payload | json }}能显示内容？因为Angular的json管道会自动处理DataSnapshot，调用它的相关方法来获取内部数据，但直接访问属性的时候就没这个隐式处理啦～

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