Question

我有一个用于列表后端过滤的输入控件。我已经为输入控件的keyup事件设置了一个observable。

如果用户按下回车键，我无法弄清楚如何处理请求。

因此，去抖动的计时器应该取决于去抖动可观察者的发射值。我假设Debounce没有重新评估它在流发射上的参数，但我尝试使用外部变量但没有成功 - 无论如何这似乎是一个黑客攻击。此外，如果有一个较少hacky方式来处理逃生（没有外部变量），请指出我正确的方向！

另一个问题是，按住一个键重复输入字符会导致此代码滞后，因为我在keyup事件上获取控制键（esc for ex）。这可以在没有松动按键的情况下受到限制吗？

或者，如果存在合适的角度事件而不是键盘，我应该挂钩吗？

                    let lastValue: string = '';
                    let debounceTime: number = 550;

                    Observable.fromEvent(ctrl.nativeElement, 'keyup')
                    .takeUntil(this.destroyedSignal)
                    .map((key:any)=>{
                        if (key.keyCode == 27 || key.keyCode == 13){
                            this.getColumnDef(fieldName).showFilterInput = false;
                            debounceTime = 0;
                            if (key.keyCode === 27) {
                                ctrl.nativeElement.value = lastValue;
                            }
                        } else {
                          debounceTime = 550;
                        }
                        return key;
                    })
                    .debounceTime(debounceTime)
                    .filter((key:any)=>this.isValidFilterKey(key.keyCode)) // no api call for control chars
                    .distinctUntilChanged()
                    .subscribe((key) => { 
                      //send filtervalue to a behaviorsubject that triggers api call .. 
                    }

Answer 1

不确定您的所有代码应该做什么，但我可以帮助您听取 Enter 。

let lastValue: string = '';
let debounceTime: number = 550;

const keyUp$ = Observable.fromEvent(ctrl.nativeElement, 'keyup').share(); // 1

keyUp$
    .takeUntil(this.destroyedSignal)
    .do(_ =>{ // 2
        if (key.keyCode == 27 || key.keyCode == 13){
            this.getColumnDef(fieldName).showFilterInput = false;
            debounceTime = 0;
            if (key.keyCode === 27) {
                ctrl.nativeElement.value = lastValue;
            }
        } else {
            debounceTime = 550;
        }
    })
    .debounceTime(debounceTime)
    .filter((key:any)=>this.isValidFilterKey(key.keyCode)) // no api call for control chars
    .distinctUntilChanged()
    .merge(keyUp$.filter((key: any) => key.keyCode == 13)) // 3
    .subscribe((key) => { 
        //send filtervalue to a behaviorsubject that triggers api call .. 
    }

我们需要多次订阅相同的observable。这样做时，我们共享所有订阅者之间的可观察性。我们将这个共享的observable存储在一个单独的变量中。
我将map更改为do。您将获得相同的结果，但您可以更清楚地说明您的意图。 map用于更改值，do用于副作用，例如。＆＃34;在可观察的＆＃34;
这里我们合并了＃34; old＆＃34;可以观察到一个只能在 Enter 的keyUp上显示的新的。由于它位于debounceTime之后，它不会被去抖并立即发出subscribe信号

我希望这会有所帮助。您将Rx与一些常规命令代码混合在一起，因此很难看到整体意图。

rxJs滤镜列表，基于angular4中的发射值进行去抖动

1 个答案: