为了账号安全,请及时绑定邮箱和手机立即绑定

形式的 ValueChanges 中的 Angular Debounce

形式的 ValueChanges 中的 Angular Debounce

隔江千里 2023-05-19 15:13:05
我有一个名为 filteredUserNames 的列表,其中包含很多用户。每次我更改表单上的值时,它都会启动一个新的数据过滤器。我知道要延迟时间以便不是每个角色都会触发我需要使用去抖动的新过滤器,但我不确定在哪里添加它。它应该在价值变化订阅中吗?还有什么是正确的实施方法?我有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);  }在 ngOnInitthis.searchString$.subscribe((searchTerm) => {      console.log(this.userNames);      if (this.userNames !== undefined) {      this.filteredUserNames = this.userNames.filter(        (userName) =>          userName.searchTerms            .toLowerCase()            .indexOf(searchTerm.toLowerCase()) !== -1      );      };    });
查看完整描述

1 回答

?
守候你守候我

TA贡献1802条经验 获得超10个赞

试试这个,你可以添加 distinctUntilChanged来忽略相似的值,并为你的副作用点击运算符,在你的情况下,它会为你的 behaviorSubject 发出新的值


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

...


this.myForm.controls.searchString.valueChanges.pipe(

   debounceTime(400),

   distinctUntilChanged(),

   tap((val) => this.searchString.next(val))    

 ).subscribe()


查看完整回答
反对 回复 2023-05-19
  • 1 回答
  • 0 关注
  • 132 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信