combineLatest 不会发出最新值

Question

我很难理解为什么combineLatest 没有返回最新值。这个例子有点做作，但至少它说明了我的问题。注意combineLatest observable 中的color 的值在subject.value 正确时返回一个先前的值。就像color$ observable 没有发出一样。

import { map, distinctUntilChanged, combineLatest } from 'rxjs/operators'
import { Observable } from 'rxjs/observable';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

const main$ = new BehaviorSubject({color: 'red'});

const color$ = main$.pipe(
  map(state => state.color),
)

main$.pipe(
  combineLatest(color$)
)
.subscribe(([state, color]) => {
  console.log(state, color, main$.value.color);
})

main$.next({
    color: 'yellow'
});

实际输出

{color: "red"} "red" "red"

{color: "yellow"} "red" "yellow"

{color: "yellow"} "yellow" "yellow"

预期输出

{color: "red"} "red" "red"

{color: "yellow"} "yellow" "yellow"  // Notice middle value is yellow

{color: "yellow"} "yellow" "yellow"

https://stackblitz.com/edit/combine-latest-issue

如果有人可以帮助解释发生了什么，并在rxjs 中提供解决方法或正确的方法来思考这个问题，我将不胜感激。

Answer 1

首先更新main$，它作为更改馈送到combineLatest()，但不会触发输出，因为color$ 没有发出值。然后color$ 计算它的新值，发出它，现在combineLatest() 有两个可用的值，第一行文本被输出。

然后main$ 更新为{color: "yellow"}，馈入combineLatest()，它从main$ 获取最新值，从color$ 获取最新值（仍然是"red"，并触发新的输出{color: "yellow"} "red" "yellow".

最后，color$ 更新并触发combineLatest() 发出最后一行输出。

Answer 2

可视化正在发生的事情而不是文字可能很有用：

main$     R--------------------Y------------------------------

color$    -------R-----------------------Y---------------------

output    -----[R,R]---------[Y,R]-----[Y,Y]------------------

如果您使用zip 而不是combineLatest，您将非常接近您的预期。看看下面如果你使用zip会发生什么：

main$     R--------------------Y------------------------------

color$    -------R-----------------------Y---------------------

output    -----[R,R]-------------------[Y,Y]------------------

Answer 3

使用 Observable.zip 而不是 combineLatest，它会从主题中发出非常接近的值。它按预期对我有用。