AngularFire2 检索不订阅更改(Firestore)

Posted

技术标签:

【中文标题】AngularFire2 检索不订阅更改(Firestore)【英文标题】:AngularFire2 retrieve don't subscribe to changes (Firestore) 【发布时间】:2018-06-25 04:56:33 【问题描述】:

在我的网站中,我想按名称显示项目列表。名称是可点击的,然后应该下载整个文档,您可以编辑和保存项目。

目前我正在使用文档中描述的方式从我的 FireStore 中查询集合数据:https://github.com/angular/angularfire2/blob/master/docs/firestore/collections.md

  private itemsCollection: AngularFirestoreCollection<Item>;
  items: Observable<Item[]>;
  constructor(private afs: AngularFirestore) 
    this.itemsCollection = afs.collection<Item>('items');
    this.items = this.itemsCollection.valueChanges();
  

问题是,我确实想要或需要对我的列表进行实时更新。所以 Observable 方法对我的应用没有意义。

我想出的唯一方法是我只使用 snapshotChanges 方法,并将其映射到一个数组,然后我将其分配给一个字段。在映射函数之后,将 items 和 itemsCollection 字段设置为 null,这样它们就不会再浪费任何带宽了。但这对我来说似乎不对。

有没有办法在 AngularFire 中只查询一次集合,最好使用查询参数,然后显示它?

【问题讨论】:

也许有用的东西:github.com/angular/angularfire2/blob/master/docs/firestore/… 【参考方案1】:

我处理此问题的一种方法是使用rxjs/add/operator/first。此方法获取 Observable 数据一次,然后结束订阅。

只需在上面导入该库并像这样进行调用:

this.items = this.itemsCollection.valueChanges().first();

那么你可以订阅它,它只会获取一次数据:

this.items.subscribe((items) => // do something with items array // );

我知道还有其他方法可以使用 rxjs do()take() 方法来处理此问题,您可能想查看这些方法。我希望这能有所帮助!

【讨论】:

【参考方案2】:

正如 Nicholas Pesa 已经回答的那样,使用 .first() 运算符可以工作,唯一需要注意的是它在发出值后不会取消订阅。如果您将 .take(integer) 运算符用作 .take(1),则可观察对象将在发出第一个值后完成。 那是不正确的。 以下关于 observables 的注释曾经并且现在仍然有效。

通过这种方式,您实际上让自己的事情变得更加困难,几乎没有任何好处。可观察的方法使事情变得更容易,即使您不会真正使用可观察的流方法。只需让异步管道 (|) 为您处理订阅,这样您就不必担心订阅或退订。如果你的数据没有改变,那么模板只会在第一次调用 firestore 中的那个集合。

【讨论】:

能否请您链接到您断言first() 不会取消订阅其来源的来源?我的理解一直是first()take(1) 在很大程度上是等价的。【参考方案3】:

如果您愿意,可以使用标准的 Firebase SDK for Web,它提供基于 Promis 的 API(查看文档 here),这样您就可以在您的服务中创建一个 Promise 类型的 getter(或 Observable.fromPromise()只会发射一次):

import * as firebase from 'firebase';

const itemsRef = firebase.firestore().collection('items');

// Into your service:
getItems(): Promise<Item[]> 
  const items: Item[];
  return itemsRef.get()
  .then(colSnap => colSnap.docs().map(snapshot => snapshot.data()));

【讨论】:

以上是关于AngularFire2 检索不订阅更改(Firestore)的主要内容,如果未能解决你的问题,请参考以下文章

canActivate 在订阅更改时不响应 Angular 2 路由器 AngularFire2

AngularFire2:Observable 的问题

Angularfire2:如何从 Firebase 存储中检索文件内容

嵌套可观察订阅问题,无法取消订阅

@angular/fire AngularFireStorage getDownloadUrl()

向 Firebase 和 AngularFire2 注册用户