根据角度keydown上的另一个字段值更新表单字段值答案

【问题标题】：update form field value based on another field value on keydown in angular根据角度keydown上的另一个字段值更新表单字段值
【发布时间】：2020-11-08 15:00:43
【问题描述】：

在我的 Angular 应用程序中，我有一个包含一些字段的表单。在此表单上，我有两个字段，它们存储百分比值，这两个字段的总和应始终为 100%。字段一已启用，用户在其中输入一个值，并且在每次击键时字段二都应更新。这是目标，但我无法实现。

这是两个字段：

      <dxi-item dataField="fix" [label]="{text: 'Fix %'}" editorType="dxNumberBox"
                [editorOptions]="{format: '#,##0.00\'%\'', onKeyDown: fixChanged, valueChangeEvent: 'keyup'}">
        <dxi-validation-rule type="required" message="A mező kitöltése kötelező"></dxi-validation-rule>
      </dxi-item>
      <dxi-item dataField="variable" [label]="{text: 'Változó %'}">
        <dx-number-box disabled="true" [(value)]="varPercent" format="#,##0.00'%'"></dx-number-box>
      </dxi-item>

这是fixChanged 事件：

  fixChanged = (e) => {
    setTimeout(() => {
      let fix = e.component.option('value');
      this.fixPercentChanged.emit(100 - fix);
    }, 100); 
  }

如您所见，在每次击键 (keyup) 时，我都会计算 varPercent 值。我将它记录到控制台，它可以工作，所以这不是问题。在标记中，我使用双向绑定，但数字框值不会改变。我哪里错了？

ps：我使用 devextreme 组件，但我认为，这个问题与此无关。我认为这是一个普遍的角度问题。

编辑：我尝试使用带有此标记的事件发射器：

      <dxi-item dataField="variable" [label]="{text: 'Változó %'}">
        <dx-number-box disabled="true" [value]="varPercent" (fixPercentChange)="varPercent=$event" format="#,##0.00'%'"></dx-number-box>
      </dxi-item>

但没有成功。

【问题讨论】：

标签： html angular devextreme

【解决方案1】：

最后，我在标记中创建了一个引用变量：

      <dxi-item dataField="variable" [label]="{text: 'Változó %'}">
        <dx-number-box #varNumberBox disabled="true" format="#,##0.00'%'"></dx-number-box>
      </dxi-item>

然后在代码隐藏中设置varNumberBox的值：

fixChanged = (e) => {
    setTimeout(() => {
      let fix = e.component.option('value');
      this.varNumberBox.value = 100 - fix;
    }, 100); 
  }

SO 在激励自己回答问题方面做得很好。

【讨论】：