我正在尝试调用输入加密事件的服务.
<input placeholder="enter name" (keyup)='onKeyUp($event)'>
下面是onKeyUp()函数
onKeyUp(event) {
let observable = Observable.fromEvent(event.target, 'keyup')
.map(value => event.target.value)
.debounceTime(1000)
.distinctUntilChanged()
.flatMap((search) => {
// call the service
});
observable.subscribe((data) => {
// data
});
}
从浏览器的网络选项卡中可以看出,它正在调用每个按键事件的键盘功能(正如它应该做的那样),但我想要实现的是每个之间1秒的去抖时间.服务电话.此外,如果我移动箭头键移动,则会触发事件.
解决方法:
所以链是非常正确的,但问题是你正在创建一个Observable并在每个keyup事件上订阅它.这就是它多次打印相同值的原因.只有多个订阅,这不是你想要做的.
显然有更多方法可以正确地做到这一点,例如:
@Component({
selector: 'my-app',
template: `
<div>
<input type="text" (keyup)='keyUp.next($event)'>
</div>
`,
})
export class App implements OnDestroy {
public keyUp = new Subject<KeyboardEvent>();
private subscription: Subscription;
constructor() {
this.subscription = this.keyUp.pipe(
map(event => event.target.value),
debounceTime(1000),
distinctUntilChanged(),
mergeMap(search => of(search).pipe(
delay(500),
)),
).subscribe(console.log);
}
ngOnDestroy(): void {
this.subscription.unsubscribe();
}
}
查看更新的演示:http://plnkr.co/edit/mAMlgycTcvrYf7509DOP
2019年1月:更新了RxJS 6