angular - 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.log(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)，但似乎没有任何改变。

有谁知道我该如何解决这个问题？

最佳答案

您可以始终使用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，

可以找到完整的示例here

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


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