AngularFire2 检索数据快照

Question

现在，我正在使用 described in the documentation 方法解包我的数据。但是，文档指出：

AngularFire2 unwraps the Firebase DataSnapshot by default, but you can get the data as the original snapshot by specifying the preserveSnapshot option.

如何在不手动解包数据快照的情况下访问 "default" 解包功能（阅读：访问 item 的元素）？

我来自 Firebase 的数据如下所示：

{
  testObj : {
    firstName: "beckah",
    lastName: "s"
  }
}

我的代码（有效）是：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { AngularFireDatabase, FirebaseObjectObservable } from 'angularfire2/database';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  item: FirebaseObjectObservable<any>;
  constructor( public navCtrl: NavController,
              public db: AngularFireDatabase ) {
    this.item = db.object('/testObj', { preserveSnapshot: true });
    this.item.subscribe(snapshot => {
      console.log(snapshot.val())
    });
  }
}

输出

Object {firstName: "beckah", lastName: "s"}

我如何才能做到完全相同的事情（console.log 我的 item 对象）而不像文档所述那样手动打开我的快照？

有什么this.item.get("firstName")方法吗？

Answer 1

使用 AngularFire，您根本不需要担心快照。只需订阅 AngularObjectObservable，它就会为您提供对象。

angularfire2 版本 4

this.item$ = this.db.object('/item').subscribe(item => console.log(item));

angularfire2 版本 5

this.item$ = this.db.object<Item>('/item').valueChanges().subscribe(item => console.log(item));

您不应该在构造函数中订阅。在 onNgInit 中订阅。然后确保在 onNgDestroy 中取消订阅以避免内存泄漏。

在许多情况下，您根本不需要订阅——让 Angular 在模板中使用 async 管道进行订阅：

angularfire2 版本 4

// component
public item$: FirebaseObjectObservable<Item>;

ngOnInit() {
  this.item$ = this.db.object('/item');
}

// template
<div *ngIf="item$ | async as item">
  First name is {{item?.firstName}}.
</div>

angularfire2 版本 5

// component
public item$: Observable<Item>;

ngOnInit() {
  this.item$ = this.db.object<Item>('/item').valueChanges();
}

// template
<div *ngIf="item$ | async as item">
  First name is {{ item?.firstName }}
</div>

AngularFire2 检索数据快照

AngularFire2 Retrieving Data Snapshot

firebase

ionic2

angularfire2

angular