时间戳

首页 > 解决方案 > 在角度的 debouceTime 之后不订阅

javascript - 在角度的 debouceTime 之后不订阅

问题描述

我希望在 300 毫秒emit数据后使用输入数据来执行此操作，我使用 debouceTime ：

subject: Subject<any> = new Subject();

constructor(private formBuilder: FormBuilder) { }

ngOnInit();

sendValue(): void {
 this.subject.pipe(debounceTime(300))
  .subscribe(() => {
    this.formValue.emit(this.dynamicForm.value);
  })
}

这是html：

  <input
     (change)="sendValue()"
     required
     [formControlName]="controls.controlName"
     matInput
  />

但它不会在 300 毫秒后执行订阅。

有什么问题 ？我怎么解决这个问题 ？？？

标签： javascriptangulartypescript

解决方案

您正在创建一个 RxJSSubject可观察对象并直接订阅它。除非将任何值推送给它，否则它不会发出。在这种情况下，使用外部 observable 是没有根据的。

您可以做的是valueChanges使用FormControl. 您也不需要绑定到change事件。将valueChanges在元素的值发生变化的任何时候发出，因为它是一个FormControl元素。

尝试以下

控制

ngOnInit() {
  ...
  this.controls.controlName.valueChanges.pipe(          // <-- form control here
    debounceTime(300)
  )
  .subscribe(() => {
    this.formValue.emit(this.dynamicForm.value);
  });
}

模板

<input
   required
   [formControlName]="controls.controlName"
   matInput
/>

更新：组合多个 observable

如果您有多个控件，一种方法是valueChanges使用 RxJSmerge函数组合所有可观察对象。

ngOnInit() {
  ...
  merge(
    this.controls.controlName.valueChanges,  
    this.controls.controlPhone.valueChanges,  
    this.controls.controlId.valueChanges,
    ...  
  ).pipe(
    debounceTime(300)
  )
  .subscribe(() => {
    this.formValue.emit(this.dynamicForm.value);
  });
}

推荐阅读