Javascript 形状变化范围内的角度去抖动
我有一个名为filteredUserNames的列表,其中包含很多用户。每次我在表单上更改一个值时,它都会启动一个新的数据过滤器。我知道要延迟时间,使不是每个字符都触发一个新的过滤器,我需要使用debounce,但我不确定在哪里添加它。它应该在值更改订阅中吗?还有,正确的实施方法是什么 我有Javascript 形状变化范围内的角度去抖动,javascript,angular,rxjs,behaviorsubject,Javascript,Angular,Rxjs,Behaviorsubject,我有一个名为filteredUserNames的列表,其中包含很多用户。每次我在表单上更改一个值时,它都会启动一个新的数据过滤器。我知道要延迟时间,使不是每个字符都触发一个新的过滤器,我需要使用debounce,但我不确定在哪里添加它。它应该在值更改订阅中吗?还有,正确的实施方法是什么 我有 searchString = new BehaviorSubject(""); searchString$ = this.searchString.asObservable(); 在构
searchString = new BehaviorSubject("");
searchString$ = this.searchString.asObservable();
在构造函数中
this.myForm = this.fb.group({
searchString: [""],
});
this.myForm.controls.searchString.valueChanges.subscribe((val) => {
// SHOULD THE DEBOUNCE GO HERE ?? //
this.searchString.next(val);
}
在恩戈尼特
this.searchString$.subscribe((searchTerm) => {
console.log(this.userNames);
if (this.userNames !== undefined) {
this.filteredUserNames = this.userNames.filter(
(userName) =>
userName.searchTerms
.toLowerCase()
.indexOf(searchTerm.toLowerCase()) !== -1
);
};
});
尝试此操作,您可以添加distinctunitrichanged以忽略类似值,并点击运算符以获得副作用,在您的情况下,副作用会向bahviorSubject发出新值
import { tap, distinctUntilChanged, debounceTime} from 'rxjs/operators';
...
this.myForm.controls.searchString.valueChanges.pipe(
debounceTime(400),
distinctUntilChanged(),
tap((val) => this.searchString.next(val))
).subscribe()