Debouncetime in Angular6 ngModelChange

问题

I have a complex calculator app written in Angular6 which calculates the results based of several inputs in the ngModelChange event and to show these results in charts directly. The calculation is done server side. Now I want to add a debouncetime, so the server dont receive a request with every key pressed.

My calculation method which is fires in the ngModelChange looks like this:

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

And my service method:

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

As you can see I already tried the debounceTime(5000) in my service but it seems like nothing has changed.

Does anyone have an idea how I can solve this problem?

回答1:

you can always implement this using Subjects like below :

declare a Subject :

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

in your template :

(ngModelChange)='inputValueChanged($event)'

So now listent to the event :

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

You'll have to subscribe to your Subject in the below way :

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

(with this your code will look neat and clean and also organised )

Edit : With rxjs >= v6 ,

Complete example can be found here

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


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

回答2:

I solved this for now with help of this question: debounceTime & distinctUntilChanged in angular 6

So I created a Viewchild for Every Input and placed them in an array. And in the ngAfterViewInit I call this method:

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

来源：https://stackoverflow.com/questions/51780025/debouncetime-in-angular6-ngmodelchange

标签

angular

typescript

rxjs

angular6

debouncing