Reassign Observable with transformed data with async pipe and RXJS-CodePudding

I have a service that always returns Observable<T>, and I cannot change the code of this service.

I have a button, whenever the button is clicked, I call the method in the service, and it returns a new Observable. With async pipe, the new data is reflected in UI.

Now I would like to transform that data. The transformation only happens when the user clicks the button. I tried to use map and return the new data, but it's not working. Did I miss something crucial?

Thanks. I'm new to RXJS

Source code and playground on StackBlitz

html

<h1>{{ random$ | async }}</h1>

<button (click)="buttonClick()">Get new Random number</button>

<button (click)="transformButtonClick()">Transform</button>

ts

import { Component, Injectable, OnInit } from '@angular/core';
import { map, Observable, of } from 'rxjs';

@Injectable()
export class Service {
  // Cannot change the code in this class
  public getRandom(): Observable<number> {
    return of(Math.random());
  }
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
  constructor(private service: Service) {}

  public random$: Observable<number> = new Observable<number>();

  ngOnInit(): void {}

  buttonClick(): void {
    this.random$ = this.service.getRandom();
    // I cannot do the transformation here, as I don't know if user want to do it or not
  }

  transformButtonClick(): void {
    // how can I update the random with data * 10?
    this.random$ = this.random$.pipe(
      map((data) => {
        data * 10;
        return data;
      })
    );
  }
}

CodePudding user response：

I might be wrong but it looks like you're not returning the * 10 value inside your map operator.

moreover, I think it could be a good idea to create a new observable to store your transformed data instead of reassigning it to the same original $random observable.

// try something like that
export class AppComponent implements OnInit {
  constructor(private service: Service) {}

  public random$: Observable<number> = new Observable<number>();
  public randomTimesTen$: Observable<number> = new Observable<number>();

// ...

  transformButtonClick(): void {
    this.randomTimesTen$ = this.random$.pipe(
      map((data) => {
        return data * 10;
      })
    );
  }