Estou usando o Rxjs 6, que filtra um observável retornado pelo Firebase com base no evento (keyup) em um campo de formulário.

Eu tenho um problema quando o usuário continua pressionando o backspace enquanto não há valor no campo do formulário, então parece que o observável é atualizado constantemente.

Adicionar um pipe com DistinctUntilChanged () não parece ser eficaz:

Função de filtro de texto datilografado:

updateFilter2() {
    const val = this.filteredValue.toLowerCase().toString().trim();

    if (this.filteredValue) {
        this.loadingIndicator = true;
        this.rows = this.svc.getData()
            .pipe(
                distinctUntilChanged(),
                debounceTime(300),
                map(_co => _co.filter(_company =>
                    _company['company'].toLowerCase().trim().indexOf(val) !== -1 || !val
                    ||
                    _company['name'].toLowerCase().trim().indexOf(val) !== -1 || !val
                    ||
                    _company['gender'].toLowerCase().trim().indexOf(val) !== -1 || !val
                )),
                tap(res => {
                    this.loadingIndicator = false;
                })
            );
    }
    else {
        this.rows = this.svc.getData()
            .pipe(distinctUntilChanged())
        this.loadingIndicator = false;
    }

    this.table.offset = 0;
}

Modelo HTML:

<mat-form-field style="padding:8px;">
    <input
            type='text'
            matInput
            [(ngModel)] = "filteredValue"
            style='padding:8px;margin:15px auto;width:30%;'
            placeholder='Type to filter the name column...'
            (input)='updateFilter2()'
    />
</mat-form-field>

Eu tenho um Stackblitz reproduzindo o comportamento:https://stackblitz.com/edit/angular-nyqcuk

Existe alguma outra maneira de resolver isso?

obrigado