Rxjs-具有keyup事件的DistinctUntilChanged() [英] Rxjs - DistinctUntilChanged() with keyup event
问题描述
我正在使用Rxjs 6,该Rxjs 6根据表单字段中的(键")事件过滤Firebase返回的可观察对象.
I'm using Rxjs 6 which filters an observable returned by Firebase based on (keyup) event in a form field.
当用户在表单字段中没有值的情况下继续按退格键时,出现了一个问题,那就好像可观察的对象会不断刷新.
I have an issue when the user keeps pressing backspace while there is no value in the form field, then it looks like the observable is constantly refreshed.
使用DistinctUntilChanged()添加管道似乎无效:
Adding a pipe with DistinctUntilChanged() doesn't seem to be effective:
打字稿过滤功能:
updateFilter2() {
const val = this.filteredValue.toLowerCase().toString().trim();
if (this.filteredValue) {
this.loadingIndicator = true;
this.rows = this.svc.getData()
.pipe(
distinctUntilChanged(),
debounceTime(300),
map(_co => _co.filter(_company =>
_company['company'].toLowerCase().trim().indexOf(val) !== -1 || !val
||
_company['name'].toLowerCase().trim().indexOf(val) !== -1 || !val
||
_company['gender'].toLowerCase().trim().indexOf(val) !== -1 || !val
)),
tap(res => {
this.loadingIndicator = false;
})
);
}
else {
this.rows = this.svc.getData()
.pipe(distinctUntilChanged())
this.loadingIndicator = false;
}
this.table.offset = 0;
}
HTML模板:
<mat-form-field style="padding:8px;">
<input
type='text'
matInput
[(ngModel)] = "filteredValue"
style='padding:8px;margin:15px auto;width:30%;'
placeholder='Type to filter the name column...'
(input)='updateFilter2()'
/>
</mat-form-field>
我有一个Stackblitz重现此行为: https://stackblitz.com/edit/angular-nyqcuk
I have a Stackblitz reproducing the behaviour: https://stackblitz.com/edit/angular-nyqcuk
还有其他解决方法吗?
谢谢
推荐答案
问题是,ALLWAYS总是生成getData.您首先查看更改,然后切换映射以获取数据.因此,您必须具有可观察到的变化.使用"FormControl",而不是[[ngModel)]的输入 因此,在您的.html
The problem is that ALLWAYS make getData. You first look at changes, then switchmap to get Data. So you must have a Observable of changes. Use a "FormControl", not an input with [(ngModel)] So, in your .html
<input type="text" [formControl]="search">
代码必须为
search= new FormControl(); //Declare the formControl
constructor() {}
ngOnInit() {
this.search.valueChanges.pipe(
debounceTime(400),
distinctUntilChanged(),
tap((term)=>{
//here the value has changed
this.loadingIndicator = true;
}),
switchMap(filteredValue=> {
//We not return the value changed,
return this.svc.getData().pipe(
map(_co => {
return _co.filter(...)
}),
tap(()=>{
this.loadingIndicator=false;
}))
})).subscribe(result=>{
this.result=result
})
}
这篇关于Rxjs-具有keyup事件的DistinctUntilChanged()的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!