Estoy usando Rxjs 6 que filtra un observable devuelto por Firebase en función del evento (keyup) en un campo de formulario.

Tengo un problema cuando el usuario sigue presionando la tecla de retroceso mientras no hay ningún valor en el campo del formulario, entonces parece que el observable se actualiza constantemente.

Agregar una tubería con DistinctUntilChanged () no parece ser efectivo:

unción de filtro @Typescript:

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;
}

Plantilla 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>

Tengo un Stackblitz que reproduce el comportamiento:https: //stackblitz.com/edit/angular-nyqcu

¿Hay alguna otra forma de abordarlo?

Gracia