RxJS 在第一次执行或使用错误谓词查找后不会执行管道运算符

Question

我有这个可观察的订阅

this.tooltipEventSubject.pipe(
    filter(event => event.type === "show"),
    tap(() => this.tooltipContent.loading = true),
    filter(() => this.messageContent?.sender !== undefined && this.tooltipContent.success === undefined),
    mergeMap(() => this.jabService.searchEntityInAddressBook(this.messageContent?.sender ?? "")),
    mergeMap(response => response.values),
    filter(response => response !== undefined) as OperatorFunction<Entity | undefined, Entity>,
    tap(() => console.log("before first")),
    find(entity => entity.name === this.messageContent?.sender),
    tap(() => console.log("after first")),
).subscribe({
    next: () => console.log("next"),
    error: err => console.log(err),
    complete: () => console.log("complete")
})

它命中了“查找”谓词（使用调试器检查），然后什么都不做。

我尝试了很多运算符，比如首先跟随一个 catchError，在这个例子中我找到了。

它正在到达“首先”，但随后它不会打印任何其他内容。我知道 find 谓词返回 false，它应该返回 false。但为什么它停止运行呢？它不应该向以下运算符返回“未定义”吗？它甚至不应该打印“完整”吗？

谢谢您的回答

Answer 1

find 运算符将等待谓词返回 true，直到那时它不会发出任何数据，即使是 undefined。

仅当 source observable completes 并且没有数据匹配时，find 才会发出 undefined 。

在您的情况下，源可观察对象是一个表单事件，因此除非您这样做，否则它不会完成。Ex.takeUntil ..

我提供了两个示例。

例如。 1

from([1, 2, 3, 4]).pipe(
  tap((data) => console.log('Before find', data)),
  find((data) => data > 5),
  tap((data) => console.log('After find', data))
)
.subscribe({
  next: console.log,
  error: console.error,
  complete: () => console.log('Completed'),
});

输出：

Before find 1

Before find 2

Before find 3

Before find 4

After find undefined

undefined

Completed

例如。 2

<button id="btnFind">Find</button>

const btnFind = document.getElementById('btnFind');
let count: number = 0;
fromEvent(btnFind, 'click')
  .pipe(
    tap(() => count++),
    // takeUntil(timer(5000)),
    tap((count) => console.log('Before find', count)),
    find(() => count > 4),
    tap((count) => console.log('After find', count))
  )
  .subscribe({
    next: (e) => console.log(e),
    error: console.error,
    complete: () => console.log('Completed'),
  });

在第二个示例中，它将在第 5 次单击后发出，或者如果取消注释 takeUntil 则在 5 秒后发出

Answer 2

如果您的谓词返回 false，则意味着没有与您的条件匹配的值，并且“查找”运算符在这种情况下不会返回任何值。

查看官方 rxjs 文档了解更多信息： https://rxjs.dev/api/operators/find