如何订阅最后一个可观察对象并在 rxjs 中执行一个函数?

how to subscribe to the last observable and execute a funtion in rxjs?

您好,我的项目中有一小段代码。

它基本上订阅了一个 angular 表单组并调用了一个绘制 svg 的方法 generatePerformanceGraph。

表单组有大约 6 个表单控件。问题是有时当我更改表单控件的值时,它会将另一个值设置为另一个表单控件。结果,当我更改某些表单控件值时,它会导致多次调用 generatePerformanceGraph。我怎样才能防止这个问题。

简而言之,基本上我想要的是当表单组发生变化时,我想订阅最后一个可观察对象,然后执行一次 generatePerformanceGraph。

this.formGroup.valueChanges.subscribe(formValue => {
  if(this.formGroup.valid) {
    this.generatePerformanceGraph(formValue);
  }
});

我尝试了以下方法,但效果不佳。

this.formGroup.valueChanges.
pipe(
  distinctUntilChanged()
) .subscribe( formValue => {
  if(this.formGroup.valid) {
    this.generatePerformanceGraph(formValue);
  }
});

尝试debounceTimems时间由你决定。 debounceTime 忽略彼此 200ms 内发生的事件,只接受最后一个事件。

https://www.learnrxjs.io/learn-rxjs/operators/filtering/debouncetime

this.formGroup.valueChanges.
pipe(
  debounceTime(200),
) .subscribe( formValue => {
  if(this.formGroup.valid) {
    this.generatePerformanceGraph(formValue);
  }
});

要采用 distinctUntilChanged 方式,您必须采用不同的方式,因为 formValue 是一个对象。

this.formGroup.valueChanges.
pipe(
  distinctUntilChanged((prev, curr) => JSON.stringify(prev) === JSON.stringify(curr)),
) .subscribe( formValue => {
  if(this.formGroup.valid) {
    this.generatePerformanceGraph(formValue);
  }
});