Как сбросить поток RxJs

Question

У меня есть следующие RxJs для автозаполнения:

this.persons = this.searchField.valueChanges.pipe(
    filter(q => q.length >= 3),
    debounceTime(500),
    distinctUntilChanged(),
    switchMap(q => {
        this.isSearching = true;
        return this.service.findPerson(q).pipe(catchError(e => this.onSearchError(e)));
    }),
    map(res => {
        this.isSearching = false;
        return res.body;
   })
);

Это прекрасно работает, за исключением одной вещи: Наблюдаемые лица не сбрасываются при очистке поля поиска.Есть ли хороший способ, как я могу этого достичь?

Answer 1

Вы можете просто изменить порядок операторов и вместо filter вернуть EMPTY внутри switchMap (или, например, of(null), в зависимости от того, как вы хотите очистить автозаполнение.

import { EMPTY } from 'rxjs';

...

this.searchField.valueChanges.pipe(
    debounceTime(500),
    distinctUntilChanged(),
    switchMap(q => {
        if (q.length >= 3) {
            this.isSearching = true;
            return this.service.findPerson(q).pipe(catchError(e => this.onSearchError(e)));
        } else {
            this.isSearching = false;
            return EMPTY; // or `of(...)` with some value so you know that the autocomplete should be cleared.
        }
    }),
    map(res => {
        this.isSearching = false;
        return res.body;
    });