Question

我有一个文本框，在每个输入都调用webapi。问题是，如果我在文本框中快速写入，则呼叫和呼叫的响应会混乱。

例如，如果我写“你好”

用h
拨打“hel”
打电话给“你好”
打电话给“hell”
打电话给“他”

每次调用都会管理响应数据，所以即使我写了“你好”，我也有最后一个与“他”相关的数据

这里是代码

HTML

<input type="text" class="form-control" [(ngModel)]="txtSearchModel" (keypress)="digitSearch($event)">

TS

digitSearch($event)
{
         this.modelService.searchModel(this.txtSearchModel)
         .then(response => {
         if (response && response.Code == 200) {
            //Manage Response.Data
         }
      });
}

如何管理Syncrhronous呼叫或在用户停止数字时只进行一次呼叫？

由于

Answer 1

尝试使用keyup事件而不是keypress：

＆＃13;

<input type="text" class="form-control" [(ngModel)]="txtSearchModel" (keyup)="digitSearch($event)">

＆＃13;

Answer 2

使用ngModelChange和updateon blur 而不是按键，这只会在输入失去焦点时触发事件，即下一个元素被聚焦。输入结束后将触发一次。

＆＃13;

<input
    type="text"
    class="form-control"
    [(ngModel)]="txtSearchModel"
    [ngModelOptions]="{updateOn: 'blur'}"
    (ngModelChange)="digitSearch($event)">

＆＃13;

Answer 3

使用像this这样的Typeahead组件可能会有用。

使用此组件，您可以使用debounceTime运算符，并且您也可以仅使用您可以配置的用户键入的最少数量的字符来触发呼叫。

Answer 4

对于延迟输入更改的情况，请使用最适合此做法的角度反应表单。

import { FormControl } from '@angular/forms';
import { debounceTime } from 'rxjs/operators';
txtSearchControl = new FormControl();
ngOnInit() { 
    this.txtSearchControl
        .valueChanges.pipe(debounceTime(1000))
        .subscribe(x=> this.digitSearch(x));
}

<input type="text"
       class="form-control"
       [formControl]="txtSearchControl">

对webApi的角度无序（异步）调用

4 个答案: