在 angular 中对两个 Observable 进行操作

Question

我有一个服务可以获取两个 Observable，storeValueOne$ 和 storeValueTwo$，它们属于 number 类型并且经常更新，但不会同时更新。

我想添加 storeValueOne、storeValueTwo 的值并将它们存储到另一个跟踪更改的可观察对象中。

使用 ngrx merge 我可以将两个 observables 组合在一起但是我不清楚如何进行计算，因为它们以不同的速率更新，而且我也不知道哪个改变了它的值。




import { Injectable } from '@angular/core';
import { forkJoin, map, merge } from 'rxjs';
import { UnstableCompComponentTwoStore } from './components/unstable-comp-two/unstable-comp-two.store';
import { UnstableCompStore } from './components/unstable-comp/unstable-comp.store';

@Injectable({
  providedIn: 'root'
})
export class GlobalStateService {

  constructor(
    private storeUnstableOne: UnstableCompStore,
    private storeUnstableTwo: UnstableCompComponentTwoStore
  ) { }

  storeValueOne$ = this.storeUnstableOne.select((state) => state.unstableStateVal);
  
  storeValueTwo$ = this.storeUnstableTwo.select((state) => state.unstableStateValTwo);


      combineData(){
        const merged = merge(this.storeValueOne$, this.storeValueTwo$)

        // merged.forEach(d => console.log(d))
        /* value 1 + value 2 */

        // mergedState = value1 + value2 

      }

}

Answer 1

听起来你需要 combineLatest:

import { combineLatest } from 'rxjs'; 

const combined = combineLatest([obs1, obs2]);

combined
  .subscribe(([latest1, latest2]) => console.log({ latest1, latest2 }));

注意：组合的可观察对象只会在每个成员至少发出一次后发出。
从那时起，它会在每次成员发出时发出，为您提供每个可观察量的最新值，保持组合可观察量的原始顺序（因此数组中的第一个值将是第一个组合可观察量的最后一个值）。

可视化它here。

在上面的示例中，如果您想将其转换为每个包含的可观察对象的最新值总数的可观察对象：

combined.pipe(
  map(values => values.reduce((o, k) => +o+k, 0))
)

Answer 2

众多解决方案之一：

import { Component, OnInit } from "@angular/core";
import { merge, of } from "rxjs";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  title = "CodeSandbox";
  obs1$ = of(1);
  obs2$ = of(2);

  ngOnInit() {
    let sum = 0;

    merge(this.obs1$, this.obs2$).subscribe((a) => {
      sum+=a
    })

    console.log(sum)
  }
}

试试 codesandbox

在 angular 中对两个 Observable 进行操作

Do operation on two Observables in angular

javascript

ngrx

angular2-observables

angular