如何在组件Angular 6中重用可观察列表

Question

我想重用可观察列表，尝试执行以下操作但不起作用：

this.transactions 是可观察的列表

this.transactions.pipe(
  map(actions => actions.map(t => {
      if (t.type === 1) {

      } else if (t.type === 2) {

      }
    }
  }))
); 

对象视图：

什么也没有发生，没有循环也没有映射，请帮忙。

Answer 1

地图运算符返回新的可观察值，您需要将新的可观察值分配给属性。

transactions$ = this.someService.transactions$;

mappedTransactions$ = this.transactions$.pipe(map(yourMapFunction));

现在您可以观察到可以通过异步管道订阅或在模板中使用。在订阅发生之前，什么都不会发生。

Answer 2

对于RXJS，不订阅其可观察对象是一个常见的陷阱。在角度上，有两种常见的方法可以实现这一目标。

异步-在HTML中。他们的ASYNC管道将为您订阅和取消订阅。此外，“ as”语法还会创建一个范围变量，该变量包含可观察对象发出的内容。

<ng-container *ngIf="transactions$ | async as transactions">
  ... interact with your observable data
</ng-container>

订阅/取消订阅-在您的代码中。将订阅呼叫添加到您的可观察对象以使其发出。副作用-您必须退订以防止内存泄漏。

ngOnInit():void {
    this.tSub = this.someService.transactions$
        .subscribe(successHandler, errorHandler, completeHandler);
}
ngOnDestroy():void {
    this.tSub.unsubscribe()
}