我在用 debounceTime为了在下拉列表中得到一个列表,到目前为止一切正常。我输入了三个字符,它触发api调用返回给我一个列表,但是问题是当我在列表中选择一个项目时值更改来自控件的导致此调用再次调用,这是不必要的。如何防止这种情况?
这是我的代码
this.myForm.controls['control'].valueChanges.pipe(
filter(text => text.length > 2),
debounceTime(1000),
distinctUntilChanged()).subscribe((value: string) => {
this.getItem(value);
});
我认为最好为表单控件提供一个标识,以便您寻找如下所示的文本输入:
<input type="text" id="inputText">
然后只使用表单控件在键入数据时获取数据,如下例所示
ngOnInit() {
const inputText = document.getElementById('inputText');
const typeahead = fromEvent(inputText, 'input').pipe(
map((e: KeyboardEvent) => (<HTMLInputElement>e.target).value),
filter(text => text.length > 2),
debounceTime(10),
distinctUntilChanged()
);
typeahead.subscribe(data => {
this.getItem(data);
});
}
那么只有当您在输入表单控制器上键入时,它才会触发 https://stackblitz.com/edit/angular-s1quxk
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。