html - Angular 2 限制在控件上触发的事件或 Action 的数量

Question

在我的应用程序中，我有一个输入框，我可以在其中搜索输入的值。我这样做是为了在文本框中的值已更改时进行搜索。代码是这样的:

<input id="searchTextField" [(ngModel)]="searchText" (ngModelChange)="SearchTextChange()" />

后端Typescript代码是这样的:

private SearchTextChange(): void {
//do search 
}

问题是我意识到这是非常低效的，因为我意识到在大多数情况下，当人们键入一个词时，我不希望它在人们键入字母“a”或“app”时搜索预期的词也许是“苹果”或类似的东西。有没有办法限制在 Angular 2 或 typescript 中触发的搜索量？所以我要么每 2 秒只执行一次搜索最大值，要么只让 Angular 触发事件在同一控件上每 2 秒最多 1 ngModelChange？

Answer 1

模板:

<input id="searchTextField" [(ngModel)]="searchText" />

将此代码放入您的组件中:

searchText:string;

ngAfterViewInit()
{
    let inputElm = document.getElementById("searchTextField");
    Observable.fromEvent(inputElm , 'keyup').debounceTime(200).subscribe( res => {
        // this will wait for 200ms and then this will called on input
        // call you api here like
        // this.get(searchText).subscribe();
    });
}