使用异步管道和 RXJS 将转换后的数据重新分配给 Observable

Question

我有一个总是 return 的服务 Observable<T>，我无法更改此服务的代码。

我有一个按钮，每当单击该按钮时，我都会调用服务中的方法，它 return 是一个新的 Observable。使用 async 管道，新数据反映在 UI.

现在我想转换该数据。只有当用户单击按钮时才会发生转换。我尝试使用 map 和 return 新数据，但它不起作用。我是不是漏掉了什么重要的东西？

谢谢。我是 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;
      })
    );
  }
}

Answer 1

我可能错了，但看起来你没有在地图运算符中返回 * 10 值。

此外，我认为创建一个新的 observable 来存储转换后的数据而不是将其重新分配给相同的原始 $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;
      })
    );
  }

使用异步管道和 RXJS 将转换后的数据重新分配给 Observable

Reassign Observable with transformed data with async pipe and RXJS

rxjs

typescript

angular