rxjs连接观测值

Question

我想用这段代码合并2个可观察的数组。

this.filterValues$[filterName] = concat(
  of(this.initialValues), // ['1', '2', '3']
  this.getFilterValues(filterName, this.afterKey) // ['4', '5', '6']
).pipe(
  tap(res => console.log(res) // ['1', '2', '3', '4', '5', '6'])
)

这里它记录了2个数组，但我不知道如何将它们合并在一起。我也试过 forkjoin, merge 没有成功。我到底做错了什么？

Answer 1

你可以使用 combineLatest 来获取每个观测值的最新值，然后对这些值进行处理。例如，我们将两个观测值合并成一个值（这是一个数组），然后手动将它们合并成一个数组。

import { Subject, combineLatest } from 'rxjs'; 
import { map } from 'rxjs/operators';


console.clear();

const subject1 = new Subject<number[]>();
const subject2 = new Subject<number[]>();

const merged = combineLatest(subject1, subject2)
  .pipe(
    map(combined => {
      const firstArray = combined[0];
      const secondArray = combined[1];
      return firstArray.concat(secondArray)
      })
    )
    .subscribe(x => console.log(x));

console.log('inital values for both arrays')
subject1.next([1,2])
subject2.next([3,4])
// [1, 2, 3, 4]

console.log('update first array')
subject1.next([5,6])
// [5, 6, 3, 4]

console.log('update second array')
subject2.next([7,8])
// [5, 6, 7, 8]

我们将两个观测值合并成一个值（是一个数组），然后手动将它们合并成一个数组。

这可以更简洁的写成

const concise = combineLatest(subject1, subject2).pipe(
  map(([first, second]) => first.concat(second)),
);

检查这个代码 爆料

请注意 combineLatest 将不会发出任何东西，直到两个观测值都发出了一个值。如果您对其中一个观测值有某种默认值，您可以使用 startWith 运营商这样的。

const concise = combineLatest(
  subject1,
  subject2.pipe(startWith([0,0])),
  )
  .pipe(
    map(([first, second]) => first.concat(second)),
  ).subscribe(
    x => console.log(x),
  );

Answer 2

Ehy,

我想你只需要发送数组的最终版本，而不是partials。所以这个应该对你有用。

this.filterValues$[filterName] = concat(
  of(this.initialValues), // ['1', '2', '3']
  this.getFilterValues(filterName, this.afterKey) // ['4', '5', '6']
).pipe(
  reduce( (all, result) => [...all, ...result], []),
  tap(res => console.log(res) // ['1', '2', '3', '4', '5', '6'])
)

这里 更多关于 reduce 操作员。

Answer 3

您需要使用 scan

如果它们发射的是数字（不是数组）。

this.filterValues$[filterName] = concat(
  of(this.initialValues), // ['1', '2', '3']
  this.getFilterValues(filterName, this.afterKey) // ['4', '5', '6']
).pipe(
  scan((r, i) => [...r, i], []),
  tap(res => console.log(res) // ['1', '2', '3', '4', '5', '6'])
)

如果它们发射的是数字数组。

this.filterValues$[filterName] = concat(
  of(this.initialValues), // ['1', '2', '3']
  this.getFilterValues(filterName, this.afterKey) // ['4', '5', '6']
).pipe(
  scan((r, i) => [...r, ...i], []),
  tap(res => console.log(res) // ['1', '2', '3', '4', '5', '6'])
)