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

Question

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

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

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

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

Answer 1

订阅中的内容不会影响Observable的来源，因此，如果要退订，则需要使用操作员来完成链或手动退订。

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

您还可以在您的订阅呼叫中取消订阅：

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

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

Answer 2

建议不要使用first operator来使可观察对象在发出第一个结果后自动完成，而不是强制性退订：

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