Javascript Angular2组件变量被多个承诺修改

我有一个搜索框，它在

keydown

事件上查询服务器，只要查询字符串长于2个字符。下面的代码是typescript，来自我的搜索组件<代码>条目。项目直接用于此组件的html模板中。代码从关注问题区域的其他内容中剥离出来

public Search(query: string)
{
        if (query && query.length > 2)
        {
            var ref = this;
            ref.entries.items = [];

            this.SearchService.Search(query).then(response => {
                let list = JSON.parse(response._body).items;
                list.forEach(element => {
                    ref.entries.items.push(element.details);
                });
            });
        }
 }

---

当用户继续键入以获取最终工作（例如：s-st-sta-stac-stack）时，我们继续查询，并最终处于一种状态，其中项目被多次修改，并且我看到相同的结果被多次附加（例如：如果stack有一个结果，那么它将为sta、stac和stack搜索查询显示）-因此，我们处于承诺返回并同时修改项目的状态。感觉上我需要一把锁，但我想有更好的方法。有什么建议吗？

您是如何处理输入更改的

您使用的是angular2，让我们使用rxjs方法。 在您的示例中，您缺少最重要的东西—切换到另一个流。这意味着，如果接收到来自输入的新值，则忽略其他请求

以下是教程： 或演示：

您需要创建如下内容：

Observable.fromEvent(input, 'keydown')
  .debounceTime(500)
  .switchMap(query => Observable.fromPromise(SearchService.Search(query)))
  .subscribe(console.log);

---

或者更好的解决方案：

this.form.get('searchbox')
        .valueChanges
        .debounceTime(400)
        .distinctUntilChanged()
        .switchMap(query => Observable.fromPromise(SearchService.Search(query)))
        .subscribe(value => console.log(value));