如何重置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;
    });