Question

我有一个在keydown事件上查询服务器的搜索框，只要查询字符串超过2个字符。下面的代码是typescript和我的搜索组件。 entries.items直接用于此组件的模板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);
                });
            });
        }
 }

当用户继续打字以完成最后的工作（ ex：s - st - sta - stack - stack ）时，我们继续查询并最终处于多项修改项目的状态时间和我看到相同的结果多次附加（例如：如果有一个堆栈结果 - 它显示为 sta ， stac 和堆栈搜索查询） - 因此我们处于承诺状态，同时返回并同时修改项目。有点像我需要锁，但我猜这是一个更好的方法。有什么建议吗？

Answer 1

您是如何处理输入更改的？

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

这是教程：https://alligator.io/angular/real-time-search-angular-rxjs/ 或演示：https://embed.plnkr.co/giSBvwKpq04qfRBLDY8x/?show=preview

您需要创建类似的东西：

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

Answer 2

甚至更好的解决方案：

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

Angular2 Component变量由多个promise修改

2 个答案: