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

Question

I want to reuse observable list, trying following but not working:

this.transactions is a observable list

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

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

      }
    }
  }))
); 

Object view:

It's nothing happen, no looping no mapping, Please help.

Answer 1

The map operator returns a new observable, you need to assign the new observable to a property.

transactions$ = this.someService.transactions$;

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

Now you have an observable that you can either subscribe to or use in the template with the async pipe. Nothing happens until a subscription happens.

Answer 2

It is a common pitfall with RXJS for one to not subscribe to their observables. In angular there are two common ways to achieve this.

Async - In the HTML. They ASYNC pipe will subscribe and unsubscribe for you. Additionally the "as" syntax creates a scoped variable that contains the content that your observable emits.

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

Subscribe/Unsubscribe - In your code. Add a subscribe call to your observables to have them emit. Side effect - You have to unsubscribe to prevent memory leaks.

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