根据angular

问题描述

在我的角度应用程序中，我有一个包含一些字段的表格。在此表单上，我有两个字段，用于存储百分比值，并且这两个字段的总和应始终为100％。启用字段1，用户在其中键入一个值，并且在每个击键字段上都应更新两个字段。这是目标，但我无法实现。

这是两个字段：

      <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); 
  }

如您所见，在每次击键（击键）时，我都会计算varPercent的值。我将其记录到控制台，它可以正常工作，所以这不是问题。在标记中，我使用双向绑定，但是numberBox的值不变。我该错吗？

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>

但没有成功。

解决方法

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

      <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在激励回答自己的问题方面做得很好。

angular devextreme html