时间戳

首页 > 解决方案 > 不要在更改时触发 rxjs 链

angular - 不要在更改时触发 rxjs 链

问题描述

我有以下代码来执行 ajax 搜索：

// Observable for search terms
searchTerm$ = new Subject<string>();

// Observable to perform actual search
articles$ = this.searchTerm$.pipe(
  switchMap(filter => this.getArticles(filter)))

// Set a new search term
searchArticles(searchTerm: string) {
  this.searchTerm$.next(searchTerm);
}

然后，在模板中，我使用这个：

<input type="text"
  [ngModel]="selectedArticle"
  (ngModelChange)="selectedArticle = $event; searchTerm$.next($event)"
  [typeahead]="articles$" />

我使用的 typeahead来自 Valor。该组件订阅articles$，它工作正常，但是因为我在搜索时触发了一个新事件，而不是仅仅缓存 searchTerm，所以当我选择某些内容时，下拉菜单会再次打开。

所以，不知何故，我需要使this.searchTerm$“懒惰”，并article$在订阅时使用该值。我想过withLatest，但由于我的第一个论点取决于我的第二个论点，所以这不是一个选择。

我觉得解决方案非常简单，但我就是看不到它。

标签： angularrxjs

解决方案

通过使 searchTerm$ 可观察到回调，我能够解决该问题：

// Observable for search terms
searchTerm$ = new BehaviorSubject<() => string>(() =>
  this.searchTerm);

// Observable to perform actual search
articles$ = this.searchTerm$.pipe(
  switchMap(filter => this.getArticles(filter())))

// Set a new search term
searchArticles(searchTerm: string) {
  this.searchTerm = searchTerm;
}

推荐阅读