Question

我有以下代码来执行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$" />

我使用的预输入为the one from Valor。该组件订阅了articles$，这很好用，但是因为我在搜索时触发了一个新事件，而不是仅缓存searchTerm，所以当我选择某些内容时，下拉列表会再次打开。

因此，无论如何，我需要使this.searchTerm$成为“惰性”，并使article$仅在订阅时使用该值。我考虑过withLatest，但是由于我的第一个论点取决于我的第二个论点，所以这不是一个选择。

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

Answer 1

通过将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;
}

不要在更改时触发rxjs链

1 个答案: