Rxjs - 带有keyup事件的DistinctUntilChanged()

时间:2018-06-07 03:14:04

标签: angular rxjs

我使用Rxjs 6根据表单字段中的(keyup)事件过滤Firebase返回的可观察对象。

当用户在表单字段中没有值时按下退格键时出现问题,然后看起来似乎不断刷新observable。

使用DistinctUntilChanged()添加管道似乎没有效果:

打字稿过滤功能:

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

还有其他方法可以解决吗?

由于

1 个答案:

答案 0 :(得分:2)

问题是ALLWAYS使得getData。首先查看更改,然后切换map以获取数据。所以你必须有一个Observable的变化。使用&#34; FormControl&#34;,而不是[(ngModel)]的输入 所以,在你的.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
          })
  }