如何在 angularfire2 中访问由 snapshotChanges() 提供的对象的属性？答案

【问题标题】：How to access properties of object supplied by snapshotChanges() in angularfire2?如何在 angularfire2 中访问由 snapshotChanges() 提供的对象的属性？
【发布时间】：2018-04-17 03:45:22
【问题描述】：

我对 Angular 和 Firebase 还很陌生，所以可能有一个非常简单的解决方案。

我正在尝试使用 Ionic Angular 和 Firebase 创建小型网络应用程序。

我在服务（“DataService”）中有以下功能：

constructor(private db: AngularFireDatabase) {}
getSessions(uid: string) {
    return this.db.list(`/sessions/${uid}/`).snapshotChanges(); 
}

在离子页面 ts 文件中，我有以下内容：

export class DashboardPage {

  ...

  sessionList: Observable<any[]>;

  constructor(... private data: DataService ...) {
  }

  ionViewWillLoad() {
      this.sessionList = this.data.getSessions(this.authenticatedUser.uid);     
    })
  }

然后在我的 DashboadPage 模板 html 文件中，我想要这个：

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

现在，这里的问题是{{ session.payload.name }} 表达式不起作用。

有趣的是，我可以使用{{ session | json }} 和{{ session.payload | json }}，它们都会在页面上呈现文本。但是，当我尝试再深入一层并添加“名称”的属性时，它只会显示为空白。这是第一个列表项包含 {{ session | json }} 时的内容：

{
  "payload": {
    "name": "One",
    "notes": {
      "-L3o08afJDL025aTYHSd": {
        "content": "The first thing in my session\n",
        "systemTime": 1516996172239
      },
      "-L3o09m9n9ewPE7kOZKv": {
        "content": "The 2nd thing in my session \n",
        "systemTime": 1516996177071
      },
      "-L3o0BlH5MbgGB-N54H5": {
        "content": "The third thing in session \"One\"\n",
        "systemTime": 1516996185207
      }
    },
    "ownerUid": "cT6gbEZBalPNUOz5bwqs6l5rH5t2",
    "systemTime": 1516996163072
  },
  "type": "value",
  "prevKey": null,
  "key": "-L3o06MSYcSS2dXJBMKO"
}

所以这里的难题是为什么我不能从“名称”键（或该级别的任何其他键）访问内容。

谢谢！

【问题讨论】：

试试{{ session.payload.val().name }}
谢谢！那成功了。你能指出一些解释为什么需要这样做的文档吗？
阅读此doc

标签： angular firebase ionic-framework firebase-realtime-database angularfire2

【解决方案1】：

用户“Hareesh”在评论中提供了正确答案：

在快照上使用 .val() 方法。例如：

{{ session.payload.val().name }}

这里有文档：

https://firebase.google.com/docs/database/web/read-and-write#listen_for_value_events

【讨论】：