如何修复&x2018；去BounceTime&；distinctUntilChanged | RxJS’；使用typescript在Angular 5中出错

我有一个输入搜索元素，我检测到keyup，我想使用debounce来限制对API的请求，但我无法让它工作。我只是想测试一下脱胶时间和脱胶时间

我已经试过（键控），但无法使其工作

<input (keyup)="onKeyUp($event)"  id="testInput" autocomplete="off" type="text" name="searchFilterText" class="m-list-search__form-input" value="" placeholder="Search...">

这是typescript文件中的代码

searchInput = document.getElementById('testInput');
observable: any;

/// <summary>
/// Process the search term provided on key up for the input field.
/// </summary>
/// <param name="searchTerm">The search term.</param>
onKeyUp(event: KeyboardEvent) {
    //console.log(event);
    let element = event.target as HTMLInputElement;
    let value = element.value;

    this.observable = fromEvent(this.searchInput, event.type)
        .debounceTime(500) // millisecs until value gets emitted.
        .distinctUntilChanged()
        .subscribe(function (event) {
            console.log(event.target.value);
        });
}

searchInput=document.getElementById（'testInput'）；
可观察：任何；
/// 
///处理输入字段的向上键上提供的搜索词。
/// 
///搜索词。
onKeyUp（事件：KeyboardEvent）{
//console.log（事件）；
让element=event.target作为HTMLInputElement；
设value=element.value；
this.observable=fromEvent（this.searchInput，event.type）
.debounceTime（500）//毫秒，直到发出值。
.distinctUntilChanged（）
.订阅（功能（事件）{
日志（event.target.value）；
});
}

预期结果是控制台日志中使用debounceTime和distinctUntilChanged的延迟搜索结果值。

您可以尝试以下方法：

模板

<input  
       id="testInput" autocomplete="off"
       type="text" #searchText
       name="searchFilterText" class="m-list-search__form-input"
       value=""
       placeholder="Search...">

<input  
       id="testInput"
       [formControl]="search"
       autocomplete="off"
       type="text"
       class="m-list-search__form-input"
       value=""
       placeholder="Search...">

此代码使用

@ViewChild

获取对用

#searchText

模板引用变量标记的元素的引用

然后，它使用与您在

debounceTime

中使用的代码类似的代码

我这里有一场闪电战：

您可以在此处找到更多信息：

注意：如果您使用反应式表单，这将更加容易，因为您可以直接访问表单上任何输入元素的

值更改

可观察

反应形式

模板

<input  
       id="testInput" autocomplete="off"
       type="text" #searchText
       name="searchFilterText" class="m-list-search__form-input"
       value=""
       placeholder="Search...">

<input  
       id="testInput"
       [formControl]="search"
       autocomplete="off"
       type="text"
       class="m-list-search__form-input"
       value=""
       placeholder="Search...">

---

这太好了，谢谢。你对如何包含distinctunitelchanged（）有什么想法吗进入逻辑？您希望

distinctUntilChanged

在这种上下文中做什么？如果我键入单词test，然后键入test1，然后键入test，最后一个值更改被正确忽略，或者是我弄错了，在我的情况下不需要它。只需将它添加到

管道中即可。我会更新我的答案。