Question

我有一个用Angular6编写的复杂计算器应用程序，该应用程序基于ngModelChange事件中的多个输入来计算结果，并直接在图表中显示这些结果。计算是在服务器端完成的。现在，我想添加一个反跳时间，这样服务器在按下每个键时都不会收到请求。

我在ngModelChange中触发的计算方法如下：

#!/bin/bash
awk 'BEGIN{ip="your_ip";no="8";line="#BalancerMember "ajp"://" ip ":8009 route=node " no " loadfactor=1 keepalive=on ttl=300 max=400 timeout=300 retry=60"}
/ProxySet lbmethod=byrequests/{
print "             " line ORS $0
next
}
1' /tmp/000-site.conf > /tmp/000-site.conf.tmp && mv /tmp/000-site.conf.tmp /tmp/000-site.conf

我的服务方法：

function reverseInt(n) {
    return Math.sign(n)*parseInt(n.toString().split('').reverse().join(''));
}

如您所见，我已经在服务中尝试了debounceTime（5000），但似乎没有任何改变。

有人知道我如何解决这个问题吗？

Answer 1

您始终可以像下面这样使用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
});

Answer 2

我现在借助以下问题解决了这个问题：debounceTime & distinctUntilChanged in 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();
     });
   }
}

Angular6 ngModelChange中的去抖动时间

2 个答案: