代码之家 › 专栏 › 技术社区 › mr__brainwash

RXJS解包时间(0)仍延迟执行

rxjs6 angular javascript

mr__brainwash · 技术社区 · 6 年前

我正在使用Angular 7和最新的RXJS和NGRX/商店。我遇到了一个问题 debounceTime(0) . DebounceTime是的@input()属性 ui-input 组件。其默认值为 0 .我想有可能使用 debounceTime 对于某些输入-对于其他输入-不。我从商店获得的输入值。另外,我还有一个验证服务,它应该验证输入值。我通过选择器将输入值传递给验证服务。问题是,在验证服务中,我正在获取以前的值。这里是一个简化的 (更新) example . 我有验证规则:input.length>2。当长度超过2时,我想得到一个错误。但是对于debouncetime(0),只有当输入长度为4时,控制台中才会出现验证错误。

如果我去掉了去缓冲时间-一切都按预期工作。我接到一个同步呼叫:

如何解决问题?我没有找到任何有条件地应用去缓冲时间的变体。另外,我认为像这样的事情不是一个好的解决方案:

ngOnInit() {
    if (this.debounceTime > 0) {
      this._valueChanged
        .pipe(
          debounceTime(this.debounceTime),
        )
        .subscribe(value => this.inputted.emit(value));
    } else {
      this._valueChanged
        .subscribe(value => this.inputted.emit(value));
    }
  }

2 回复 | 直到 6 年前

Sunil Singh 6 年前

您不应该从主题或行为主题获取值,而应该订阅它。

商店服务.ts

所以应该更改以下代码

  process() {
    console.log('Store:   ', this.value$.getValue());
  }

到

 constructor(){
    this.value$.subscribe(v=>{
      console.log('Store:   ', v);
    })
  }

您不需要手动调用store函数,因此也可以删除它。

工作样本代码在这里- https://stackblitz.com/edit/angular-5ajqn9

mr__brainwash 6 年前

我的问题的答案是将验证调用移动到与 (inputted) 事件- onInit :

ngOnInit() {
    this._valueChanged
      .pipe(
        debounceTime(this.debounceTime),
      )
      .subscribe(value => {
        this.inputted.emit(value);
        const isValid = this.valdiationService.validate('myInput');
        if (isValid) {
          console.error('Input is not valid');
        }
      });
  }

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前