AngularFire2检索数据快照



现在,我正在使用文档中描述的方法解开数据。但是,文档指出:

AngularFire2默认情况下将Firebase DataSnapShot解开,但是您可以通过指定PreservesNapShot选项来将数据作为原始快照。

我将如何访问"默认"解开功能(读:访问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")方法?

使用AngularFire,您根本不必担心快照。只需订阅AngularObjectObserable,它将为您提供对象。

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中取消订阅以避免内存泄漏。

在许多情况下,您根本不需要订阅 - LET 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>

相关内容

  • 没有找到相关文章

最新更新