Debouncetime в Angular6 ngModelChange

У меня есть сложное приложение-калькулятор, написанное на Angular6, которое вычисляет результаты на основе нескольких входных данных в событии ngModelChange и напрямую отображает эти результаты в диаграммах. Расчет производится на стороне сервера. Теперь я хочу добавить время отладки, чтобы сервер не получал запрос при каждой нажатой клавише.

Мой метод расчета, который запускается в ngModelChange, выглядит так:

async calculate(){
 if (this.checkInputs()){
   try{
     let returnDto = await this.webApiService.calculate(new CalculatorInputDto(this.model)).toPromise();
     this.outputCalculate.emit(returnDto);
   }
   catch(e){
     console.info(e);
   }
}

И мой способ обслуживания:

calculate(dto: CalculatorInputDto): Observable<any> {
 let url = this.baseUrl + "calculate";
 return this.http.post(url, JSON.stringify(dto), this.options)
    .pipe(
        debounceTime(5000),
        map((res => res.json())),
        catchError(error => this.handleError(error))
     );
}

Как видите, я уже пробовал использовать debounceTime (5000) в своем сервисе, но похоже, что ничего не изменилось.

Есть ли у кого-нибудь идеи, как я могу решить эту проблему?

вам нужен debounceTime в вашей подписке на keypress, а не здесь

dee zg 10.08.2018 08:11

Проверьте это: stackoverflow.com/questions/50275945/…

Sujata Chanda 10.08.2018 08:36
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
9
2
5 625
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Я решил это сейчас с помощью этого вопроса: debounceTime & independentUntilChanged в angular 6

Поэтому я создал Viewchild для каждого входа и поместил их в массив. И в ngAfterViewInit я вызываю этот метод:

setInputEvent() {
 let inputArray = this.fillViewChildsInArray();
 for (let element of inputArray) {
    this.input$ = fromEvent(element.nativeElement, 'input')
    .pipe(
       debounceTime(1000),
       map((e: KeyboardEvent) => e.target['value'])
     );
     this.input$.subscribe((val: string) => {
      this.calculate();
     });
   }
}
Ответ принят как подходящий

вы всегда можете реализовать это с помощью Subjects, как показано ниже:

объявить тему:

customInput : Subject<string> = new Subject();

в вашем шаблоне:

(ngModelChange)='inputValueChanged($event)'

Итак, теперь прислушиваемся к событию:

  inputValueChanged(event){
      this.customInput.next(event);
  }

Вам нужно будет подписаться на вашу тему следующим образом:

this.customInput.debounceTime(300).distinctUntilChanged().subscribe(value =>{
       //value will have your input
    });

(с этим ваш код будет выглядеть аккуратно и чисто, а также организованно)

Обновлено: с rxjs> = v6,

Полный пример можно найти здесь

import { Subject } from 'rxjs';
import { debounceTime, distinctUntilChanged} from 'rxjs/operators';


this.customInput.pipe(debounceTime(300),distinctUntilChanged()).subscribe(value =>{
 //value will have your input
});

Другие вопросы по теме