Angular беспорядочные (асинхронные) вызовы webApi
У меня есть текстовое поле, которое при каждом входе вызывает вызов webapi. Проблема в том, что если я напишу в текстовое поле немного быстрее, вызов и ответы на вызов будут беспорядочными.
Например, если я напишу "привет"
- вызвать с h
- вызвать с "hel"
- вызвать с "привет"
- звонить с "адом"
- вызвать с "он"
Каждый вызов управляет данными ответа, поэтому у меня есть последние данные относительно слова «он», даже если я написал «привет»
Вот код
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
Попробуйте использовать событие keyup вместо нажатия клавиши:
<input type = "text" class = "form-control" [(ngModel)] = "txtSearchModel" (keyup) = "digitSearch($event)">ничего не изменилось, вызов начинается, когда я нажимаю keyUp вместо keydown, но также в этом случае в слове из 5 цифр запускает 5 вызовов асинхронно
когда вы хотите вызвать в службу API?
когда пользователь ничего не пишет в течение 1 секунды
поэтому для этого вы можете использовать setTimeout (functioncall (), 1000);
Я думаю, что лучший способ вызвать digitSearch - это когда пользователь нажимает клавишу Enter
Позвольте нам продолжить обсуждение в чате.
Вот рабочий пример jsbin.com/zitemil/18/edit?html,js,output, подробнее см. medium.com/aviabird/…
Используйте ngModelChange с обновлением размытия вместо нажатия клавиши, и это вызовет событие только тогда, когда ввод потерял фокус, т.е. следующий элемент сфокусирован. Он будет запущен один раз после завершения ввода.
<input
type = "text"
class = "form-control"
[(ngModel)] = "txtSearchModel"
[ngModelOptions] = "{updateOn: 'blur'}"
(ngModelChange) = "digitSearch($event)">Затем удалите [ngModelOptions] = "{updateOn: 'blur'}", и ваши события станут синхронными.
Есть ли способ сделать звонок, только если пользователь ничего не пишет в течение 1 секунды?
Да, это debounceTime (1000). Но применяется ли это к наблюдаемому следующим образом: observable $ .pipe (debounceTime (1000));
вы можете привести мне пример?
Возможно, будет полезно использовать компонент Typeahead, например это.
С помощью этого компонента вы можете использовать оператор debounceTime, а также запускать вызов только с минимальным количеством символов, набранных пользователем, которое вы можете настроить.
В случае задержки изменений ввода используйте Угловые реактивные формы, который лучше всего подходит для этой практики.
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">
Вам просто нужно изменить событие, используя событие нажатия клавиши вместо нажатия клавиши