如何在调用同一事件时保留事件

Question

如何以角度保持事件触发。

这个问题与我的另一个问题有关：how to stop array.filter() function

我已经尝试过所有答案。但我对这个答案并不满意。

所以我从自己的想法中做了一些事情。

问题： 我有一个ngmodelchange事件，用于调用方法。您可以看到我最近使用ngModelChange（）事件的问题。无论如何，我也会在这里解释一下。

使用ngModelChange事件搜索和过滤大量数据。所以问题是当我连续输入字符时应用程序挂起。

我的建议

所以我建议自己在用户停止输入后使用一些逻辑来调用过滤器功能。但我们不知道用户何时会停止输入。

所以我在下面创建了一个逻辑。

做了什么

(ngModelChange)="clearSearch(gloablFilterValue)"// html side

在.ts方面

 clearSearch(newValue: string) {
       this.oldFilterText = newValue;
        if (this.isLooping) {
            return false;
        }  

        for (let i = 0; i > newValue.length + 1; i++) {
            this.isLooping = true;
            if (this.oldFilterText == newValue) {
                this.splitCustomFilter();//filter function
            }
        }

    }

以上代码无效。我刚开始写逻辑。所以，如果有人有任何想法。请跟我一起提出你的建议和想法。

主要问题

在用户在文本框中输入值之前，我们如何停止事件触发？我们如何启动事件触发用户在文本框中键入值？

**重要提示：我不想使用焦点和模糊事件。因为过滤器应该在用户键入值时起作用。

Answer 1

您正在寻找的是 deboucing 。一个很好的选择是限制。 RxJS支持两个运算符，称为debounceTime和throttleTime。这是一个如何利用它们的简单示例。

在模板中，监听输入事件（或其他一些事件，根据您在用例中监听的内容）。

<input type=text (input)="onInput($event.target.value)">

在您的组件代码中，创建一个主题，然后在订阅之前使用相应的运算符。

// create a subject
private subject = new Subject<string>()

// function to call when event fires
public onInput(input: string) { this.subject.next(input) }

ngOnInit() {
  // debounce the stream
  this.subject.debounceTime(300).subscribe(inputText => {
     // this is where you can do you .filter
     console.log(inputText)
  })
}

当然，您可以根据需要调整300参数。