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:如何从 Firebase 存储中检索文件内容