时间戳

首页 > 解决方案 > Angular：将两个表单控件绑定到同一个模型

angular - Angular：将两个表单控件绑定到同一个模型

问题描述

我使用该ControlValueAccessor界面创建了两个控件——一个日期选择器和一个年龄选择器——并希望使用相同的值将它们绑定在一起。这些代表退休日期和年龄，用户应该能够修改一个并查看另一个输入更新。

我通过订阅form.valueChangesobservable 来做到这一点，如下所示：

this.form.valueChanges.subscribe((val) => {
  if (val.retirementDate !== this.currentDatePickerValue) {
    // retirement date changed
    this.currentDatePickerValue = val.retirementDate;
    setTimeout(() => this.retirementAgeCtrl.setValue(this.currentDatePickerValue));
  } else if (val.retirementAge !== this.currentAgePickerValue) {
    // retirement age changed
    this.currentAgePickerValue = val.retirementAge;
    setTimeout(() => this.retirementDateCtrl.setValue(this.currentAgePickerValue));
  }
});

没有setTimeout()s，这会导致堆栈异常，但使用它们它可以工作。不幸的是，它的效率并不高，因为当任何一个输入发生变化时，这段代码会运行十几次或更多次。

我怎样才能做到这一点，以便代码只执行必要的次数？

标签： angularalgorithmtypescript

解决方案

将 emitEvent选项传递为 false

emitEvent：当为 true 或未提供（默认值）时，statusChanges 和 valueChanges 可观察对象都会在控件值更新时发出具有最新状态和值的事件。如果为 false，则不会发出任何事件。

this.form.valueChanges.subscribe((val) => {
  if (val.retirementDate !== this.currentDatePickerValue) {
    // retirement date changed
    this.currentDatePickerValue = val.retirementDate;
    this.retirementAgeCtrl.setValue(this.currentDatePickerValue, {emitEvent: false})
  } else if (val.retirementAge !== this.currentAgePickerValue) {
    // retirement age changed
    this.currentAgePickerValue = val.retirementAge;
    this.retirementDateCtrl.setValue(this.currentAgePickerValue, {emitEvent: false})
  }
});

推荐阅读