RxJS 共享操作符在 *ngIf 内部的一个问题

Question

我开始精通 RxJS 运算符，但我仍然对其中一些有困难。在实现搜索组件时，我有以下代码：

      searchResult$: Observable<LunrDoc []>;
      searchResultLength$: Observable<number>;

      ngAfterViewInit(): void {

        // observable to produce an array of search hits

        this.searchResult$ = fromEvent<Event>(this.searchInput.nativeElement, 'keyup').pipe(
          debounceTime(1000),
          switchMap(e => this.ss.search((e.target as HTMLTextAreaElement).value)),
          share()
        );

        // observable to return the length of the array

        this.searchResultLength$ = this.searchResult$.pipe(
          map(sr => sr ? sr.length : 0),
          share()
        );
      }

这在模板中是这样使用的：

    <p *ngIf="(searchResultLength$ | async) > 0">
      Total Documents: {{ (searchResultLength$ | async) | number }}
    </p>

    <p *ngFor="let doc of (searchResult$ | async)">
      <span *ngIf="doc.path" [routerLink]="doc.path" style="color: darkblue; font-weight: bold; text-underline: darkblue; cursor: pointer">
        {{ doc.title }}
      </span>
      {{ doc.content.substring(0, 400) }}
    </p>

当searchResult$ observable 发出一个非空数组时会发生什么，第一个段落元素中的呈现结果为“Total Documents:”，后面没有数字。 *ngFor 修饰的段落完全按预期工作。

我相信的原因是第二个async 管道在最后一个值发出后被激活并订阅了共享的 observable。所以它永远不会得到“下一个”调用。

是否可以使用 RxJS 运算符代替 share 来解决这种情况？还是我错过了什么？

Answer 1

正如@Ingo Bürk 建议的那样。 shareReplay(1) 可能是您正在寻找的。 1 指的是缓冲区大小（它应该向您播放多少值）。

Share replay docs

我还建议避免创建多个可观察对象。

例如这会创建两个不同的订阅者。

<p *ngIf="(searchResultLength$ | async) > 0">
  Total Documents: {{ (searchResultLength$ | async) | number }}
</p>

替代方案是：

<p *ngIf="(searchResultLength$ | async) as searchResultLength > 0">
  Total Documents: {{ searchResultLength | number }}
</p>

建议的解决方案

查看代码并尝试了解功能，我认为您可以进行这些更改以获得所需的输出。

组件：

searchResult$: Observable<LunrDoc []>;
    
ngAfterViewInit(): void {
    this.searchResult$ = fromEvent<Event>(this.searchInput.nativeElement, 'keyup')
    .pipe(
        debounceTime(1000),
        switchMap(e => this.ss.search((e.target as HTMLTextAreaElement).value)),
    );
}

您不需要share 或shareReplay，因为它们似乎没有提供您的模板需要的任何功能。除非模板中有更多代码在您的问题中不可见。

this.searchResultLength$ observable 似乎也是多余的，因为它只是 this.searchResult$ 返回的值上的 length 属性。

模板：

<ng-container *ngIf="{searchResult: searchResult$ | async} as vm">
    <p *ngIf="vm.searchResult.length > 0">
        Total Documents: {{ vm.searchResult }}
    </p>

    <p *ngFor="let doc of vm.searchResult">
        <span *ngIf="doc.path" [routerLink]="doc.path" style="color: darkblue; font-weight: bold; text-underline: darkblue; cursor: pointer">
            {{ doc.title }}
        </span>
        {{ doc.content.substring(0, 400) }}
    </p>
</ng-container>

包装器ng-container 将始终显示，因为ngIf 条件将评估为真值。

注意

在处理触发可观察对象的输入时，考虑查看 ditinctUntilChanged 运算符：https://www.learnrxjs.io/operators/filtering/distinctuntilchanged.html