javascript - 在 Angular 2 中订阅 FormControl 的真实值变化的最佳方式？

Question

valueChanges 存在于 FormControl 对象上的 Observable 每次在 FormControl 对象上调用 setValue(value) 函数时都会发出值。

使用 RxJS 运算符 distinctUntilChanged 我们可以过滤掉不是新的值。但是，如果 FormControl 具有初始值，这将不起作用。

const formGroup1 = new FormGroup({page: new FormControl(1)});
const formControl1 = formGroup1.get('page');
formControl1.valueChanges.pipe(distinctUntilChanged())
  .subscribe(v => console.log(`new formControl1 value: ${v}`));
formControl1.setValue(1);
formControl1.setValue(2);

这是要记录

> new form1Control value: 1
> new form1Control value: 2

1 是 valueChanges Observable 发出的第一个值，因为 formControl1 值是在 valueChanges Observable 创建之前设置的。

distinctUntilChanged 从不过滤掉第一个发出的值

下面是这个问题的一个解决方案:

const formGroup2 = new FormGroup({page: new FormControl(1)});
const formControl2 = formGroup2.get('page');
formControl2.valueChanges.pipe(
    startWith(1),
    distinctUntilChanged(),
    skip(1)
).subscribe(v => console.log(`new formControl2 value: ${v}`));
formControl2.setValue(1);
formControl2.setValue(2);

在这里，我通过发出 FormControl 初始值然后跳过它来修改 valueChanges Observable。所以第一次 distinctUntilChanged 被调用，这是行:

formControl2.setValue(1)

它已经有 previousValue (1) 来比较新值，所以 subscribe 中的函数不会被执行。

但我不太喜欢这个解决方案。是否有内置或推荐的方法来处理 Angular7 和 RxJS6 中的 FormControl 值更改？

堆栈 Blitz :https://stackblitz.com/edit/angular-arevmw?file=app%2Ficon-overview-example.ts

Answer 1

如果我对问题的理解正确，您希望您的可观察对象仅在除初始值之外的任何值更改时触发？

创建表单控件时是否尝试过设置值

新的 FormControl({ value: 1 });

或者您可以指定在设置值时不想发出事件

const formControl1 =new FormControl(1);
formControl1.setValue(1, { emitEvent: false });


根据文档，您可以在设置值时指定选项，包括:

emitEvent: When true or not supplied (the default), both the statusChanges and valueChanges observables emit events with the latest status and value when the control value is updated. When false, no events are emitted.

希望对您有所帮助!