RxJs：计算组件中的可观察数组长度答案

【问题标题】：RxJs: Calculating observable array length in componentRxJs：计算组件中的可观察数组长度
【发布时间】：2018-09-25 14:33:36
【问题描述】：

我有一个可观察的数组，purchases$。在我的角度 2 组件中，我想计算数组的长度。我担心 observable 永远不会完整，因此我的订阅最终会堆积起来。如果我执行以下操作，订阅是否完成？

this.purchases$.subscribe((val) => {
  val.length > 0 ? this.purchaseType = 'initial' : this.purchaseType = 'additional'
})

一旦我有了初始值，我很乐意退订。

我可以简单地在末尾添加.unsubscribe() 吗？

【问题讨论】：

【解决方案1】：

您订阅的内容不会影响源 Observable，因此如果您想取消订阅，您需要使用完成链的运算符或手动取消订阅。

例如，如果您知道要接受多少个项目，您可以使用take(N)，或者如果取决于特定条件，您可以使用takeWhile()。或者您可以使用scan() 收集物品并将其与takeWhile() 结合使用。

您也可以在订阅电话中取消订阅：

this.purchases$.subscribe(function(val) {
  if (condition) {
    this.unsubscribe();
  }
});

请注意，在这种情况下，您不能使用箭头函数 () => ...，因为 RxJS 将 this 上下文绑定到当前的 Subscription 对象。这就是为什么您可以致电this.unsubscribe() 并取消订阅（这不是黑客攻击，它旨在以这种方式使用）。

【讨论】：

【解决方案2】：

我建议您使用first operator 创建一个在第一个结果发出后自动完成的可观察对象，而不是强制取消订阅：

this.purchases$.pipe(first()).subscribe((val) => {
  val.length > 0 ? this.purchaseType = 'initial' : this.purchaseType = 'additiona';
})

【讨论】：