Question

我是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"
}

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

谢谢！

Answer 1

用户＆＃39; Hareesh＆＃39;在评论中提供了正确答案：

在快照上使用.val（）方法。例如：

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

这里有文档：

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

如何在angularfire2中访问snapshotChanges（）提供的对象属性？

1 个答案: