Угловые неупорядоченные (асинхронные) вызовы webApi

Question

У меня есть текстовое поле, которое при каждом входе делает вызов webapi.Проблема в том, что, если я напишу в текстовом поле немного быстро, вызов и ответы на вызов будут неупорядоченными.

Например, если я напишу "привет"

• вызовс h
• вызов с "hel"
• вызов с "hello"
• вызов с "адом"
• вызов с "he"

Каждый вызов управляет данными ответа, поэтому у меня есть последние данные относительно слова "он", даже если я написал "привет"

Здесь код

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
         }
      });
}

Как я могу управлять синхронным звонком или делать только один звонок, когда пользователь останавливает цифру?

Спасибо

Answer 1

В случае задержки изменений на входе, пожалуйста, используйте Угловые реактивные формы , которые лучше всего подходят для этой практики.

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">

Answer 2

Используйте ngModelChange с обновлением по размытию вместо нажатия клавиши, и это вызовет событие, только когда вход потерял фокус, т.е. следующий элемент сфокусирован.Он будет запущен один раз по окончании ввода.

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

Answer 3

Может быть, было бы полезно использовать компонент Typeahead, такой как this .

С этим компонентом вы можете использовать оператор debounceTime, а также вы можете выполнить вызов только с минутойколичество символов, набираемых пользователем, которые вы можете настроить.

Answer 4

Попробуйте использовать событие keyup вместо нажатия клавиши:

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