形式的 ValueChanges 中的 Angular Debounce

我有一个名为 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);  

}

在 ngOnInit


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

      );

      };

    });


隔江千里
浏览 133回答 1
1回答

守候你守候我

试试这个,你可以添加 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()
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript