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

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

0 голосов
/ 05 июня 2018

У меня есть текстовое поле, которое при каждом входе делает вызов 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
         }
      });
}

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

Спасибо

Ответы [ 4 ]

0 голосов
/ 05 июня 2018

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

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">
0 голосов
/ 05 июня 2018

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

<input
    type="text"
    class="form-control"
    [(ngModel)]="txtSearchModel"
    [ngModelOptions]="{updateOn: 'blur'}"
    (ngModelChange)="digitSearch($event)">
0 голосов
/ 05 июня 2018

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

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

0 голосов
/ 05 июня 2018

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

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